Este artigo compartilha um método simples de operação de tabelas JS para sua referência. O conteúdo específico é o seguinte
<! Doctype html> <html> <head> <meta charset = "utf-8" /> <title> zzzz < /title> <yley> *{margin: 0; preenchimento: 0; } corpo {largura: 1000px; margem: 100px automático; Fonte-família: "Microsoft Yahei"; Size da fonte: 18px; Background-Color: #FFF; } #table tr {text-align: Center; } tbody tr: nth-child (2n+1) {background-color: #ccc; } TBody TR: Hover {Background-Color: Green; } input [type = text] {altura: 25px; Largura: 136px; Background-Color: turquesa; Margin-Bottom: 10px; } </style> <script type = "text/javascript"> window.onload = function () {var otb = document.getElementById ("tabela"); var otr = otb.tbodies [0] .Rows; var oadd = document.getElementById ("add"); var oneMe = document.getElementById ('nome'); var osex = document.getElementById ('sexo'); var id = otr.length+1; OAdd.OnClick = function () {var att = 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> exclua </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 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 = 'vermelho'; }}}}}}}}} </script> </ad Head> <body> <input type = "text" placeholder = "Por favor, insira a pesquisa de conteúdo" id = "ss"/> <input type = "button" value = "consulher" "" name ""> "names ="> "> tymer =" text = "ida" "" ">" names = ">" names = ">"> tymer = "text =" idy "" ""> ">"> ">", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", ",", no nome do texto ">"> ">", ",", ",", ",", ",", ", no nome do texto", o "time" e o texto "e o texto" e o texto ">"> ">. <input type="button" value="Add" id="add"/> <table id="table"> <ttrun> <td>Serial number</td> <td>People name</td> <td>Gender</td> <td>Modify</td> </tr> <tbody> <tr> <td>1</td> <td>Zhang San</td> <Td> masculino </td> <td> excluir </td> </tr> <tr> <td> 2 </td> <td> li si </td> <td> masculino </td> <td> delete </td> </td> delete </td> </td> <tg. <td> feminino </td> <td> excluir </td> </tr> <td> 4 </td> <td> Liu yan </td> <td> fêmea </td> <td> delete </td> </tr> </tbody> </head> </tabela> </body> </ht>O exposto acima é tudo sobre este artigo, espero que seja útil para o aprendizado de todos.