この記事では、参照用のJSテーブルを操作する簡単な方法を共有しています。特定のコンテンツは次のとおりです
<！doctype html> <html> <head> <head> 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）{background-color：#ccc; } tbody tr：hover {background-color：green; } input [type = text] {height：25px;幅：136px;バックグラウンドカラー：ターコイズ;マージンボトム：10px; } </style> <script type = "text/javascript"> window.onload = function（）{var otb = document.getElementById（ "table"）; var otr = otb.tbodies [0] .rows; var oadd = document.getElementById（ "add"）; var oneem = 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 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 = ''; 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 = "text" placeholder = "を入力してください。 value add "id =" add "/> <table id =" table "> <ttrun> <td>シリアル番号</td> <td>人名</td> <td>ジェンダー</td> </tr> <tbody> <tr> <td> 1 </td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <td> delete </td> </tr> <tr> <td> 2 </td> <td> li si </td> <td>男性</td> <td> delete </td> </tr> <td> <td> delete </td> </tr> <td> 4 </td> <td> liu yan </td> <td>女性</td> <td> delete </td> </tr> </tbody> </head> </table> </body> </html>上記はこの記事に関するものです。すべての人の学習に役立つことを願っています。