この記事では、参照用の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>上記はこの記事に関するものです。すべての人の学習に役立つことを願っています。