В этой статье используется простой метод работы таблиц JS для вашей ссылки. Конкретный контент заключается в следующем
<! Doctype html> <html> <head> <meta charset = "utf-8" /> <title> zzzz < /title> <style> *{margin: 0; Заполнение: 0; } body {width: 1000px; Маржа: 100px Auto; Фондовая семья: «Microsoft Yahei»; размер шрифта: 18px; фоновый цвет: #fff; } #table tr {text-align: center; } tbody tr: nth-child (2n+1) {foangy-color: #ccc; } tbody tr: Hover {founal-color: green; } input [type = text] {height: 25px; Ширина: 136px; фоновый цвет: бирюзовый; маржинальный бат: 10px; } </style> <script type = "text/javascript"> window.onload = function () {var Otb = document.getElementById ("таблица"); var OTR = OTB.Tbodies [0] .Rows; var oadd = document.getElementById ("добавить"); var oneme = document.getElementbyId ('name'); var osex = document.getElementbyId ('sex'); var id = otr.length+1; oadd.onclick = function () {var attr = document.createElement ('tr'); var atd1 = document.createElement ('td'); var atd2 = document.createElement ('td'); var atd3 = document.createElement ("td"); var atd4 = document.createElement ("td"); atd4.innerhtml = '<a> delete </a>'; atd1.innerhtml = id ++; atd2.innerhtml = oname.value; atd3.innerhtml = osex.value; Atr.AppendChild (ATD1); Atr.AppendChild (ATD2); Atr.AppendChild (ATD3); Atr.AppendChild (ATD4) OTB.Tbodies [0] .appendChild (ATR); atd4.getelementsbytagname ('a') [0] .onclick = function () {otb.tbodies [0] .RemoveChild (this.parentnode.parentNode)} var oTn = document.getElementById ("btn"); var otxt = document.getElementById ("ss"); optn.onclick = function () {for (var i = 0; i <otb.tbodies [0] .rows.length; i ++) {var osta = otb.tbodies [0] .rows [i] .cells [1] .innerhtml.tolaycase (); var ot = otxt.value.tolowercase (); var oar = ot.split (''); Otb.tbodies [0] .Rows [i] .style.background = ''; for (var j = 0; j <oar.length; j ++) {if (osta.search (oar [j])! =-1) {otb.tbodies [0] .rows [i] .style.background = 'red'; } } } } } } } } </script> </head> <body> <input type="text" placeholder="Please enter search content" id="ss"/> <input type="button" value="Query" id="btn"/><br /> Name: <input type="text" id="name" /> Gender: <input type="text" id="sex" /> <input type = "кнопка" value = "add" id = "Add"/> <table id = "table"> <ttrun> <td> серийный номер </td> <td> name </td> <td> гендер </td> <td> modify </td> </tr> <tbody> <tr> <td> 1 </td> <td> zhang> <tdy> <tbody> <td> <td> 1 </td> <td> zhang> <tbody> <tbody> <Tbody> <td> <td> 1 </td> <td> zhang> <tbody> <tbody> <td> <td> 1 <td> <td> zhang> </td> <tbody> <td> <td> 1 <td> <Td> мужчина </td> <td> delete </td> </tr> <tr> <td> 2 </td> <td> li si </td> <td> мужчина </td> <td> delete </td> </tr> <td> delete </td> </tr> <td> 3 <td> <td> <td> <td> <Td> самка </td> <td> delete </td> </tr> <td> 4 </td> <td> liu yan </td> <td> самка </td> <td> delete </td> </tr> </tbody> </Head> </table> </body> </html>Выше приведено в этой статье, я надеюсь, что это будет полезно для каждого обучения.