Dieser Artikel hat eine einfache Methode zum Betrieb von JS -Tabellen für Ihre Referenz. Der spezifische Inhalt ist wie folgt
<! DocType html> <html> <kopf> <meta charset = "utf-8" /> <title> zzzz < /title> <style> *{Margin: 0; Polsterung: 0; } body {width: 1000px; Rand: 100px Auto; Schriftfamilie: "Microsoft Yahei"; Schriftgröße: 18px; Hintergrundfarbe: #fff; } #table tr {text-align: center; } tbody tr: nth-Kind (2n+1) {Hintergrundfarbe: #CCC; } tbody tr: hover {Hintergrundfarbe: grün; } input [type = text] {Höhe: 25px; Breite: 136px; Hintergrundfarbe: Türkis; Randboden: 10px; } </style> <script type = "text/javaScript"> window.onload = function () {var otb = document.getElementById ("Tabelle"); var otr = otb.tbodies [0] .Rows; var oadd = document.getElementById ("add"); 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> löschen </a>'; atd1.innerhtml = id ++; ATD2.InnerHtml = oneame.Value; ATD3.NerHtml = 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 obtn = document.getElementById ("btn"); var otxt = document.getElementById ("ss"); obtn.onclick = function () {for (var i = 0; i <otb.tBodies [0] .Rows.length; i ++) {var osta = otb.tbodies [0] .Rows [i] .cells [1] .innerHtml.tolowerCase (); var ot = otxt.value.tolowerCase (); var oar = ot.split (''); otb.tbodies [0] .Rows [i] .style.background = ''; für (var j = 0; j <oar.length; j ++) {if (osta.search (oar [j])! }}}}}}}} </script> </head> <body> <Eingabe type = "text" placeholder = "Bitte geben Sie den Suchinhalt ein" id = "ss"/> <Eingabe type = "button" value = "query" id = "btn"/<br/> name: <eingabetyps ". value = "add" id = "add"/> <table id = "table"> <ttrun> <td> Seriennummer </td> <td> PEOTER -NAME </td> <td> Geschlecht </td> <td> modify </td> </tr> <Tbody> <tr> <Td> mALE </td> </td> ZHANGHANG SAN </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> zeich <td>Delete</td> </tr> <tr> <td>2</td> <td>Li Si</td> <td>Male</td> <td>Delete</td> </tr> <td>Delete</td> </tr> <td>3</td> <td>Caesar</td> <td>Female</td> <td> löschen </td> </tr> <td> 4 </td> <td> liu yan </td> <td> weiblich </td> <td> löschen </td> </tr> </tbody> </head> </table> </body> </html> </tbody> </head> </body> </html>Das Obige dreht sich alles um diesen Artikel, ich hoffe, es wird für das Lernen aller hilfreich sein.