Este artículo comparte un método simple de operación de tablas JS para su referencia. El contenido específico es el siguiente
<! DocType html> <html> <head> <meta charset = "utf-8" /> <title> zzzz </title> <style> *{margin: 0; relleno: 0; } cuerpo {ancho: 1000px; Margen: 100px Auto; Font-Family: "Microsoft Yahei"; tamaño de fuente: 18px; Color de fondo: #fff; } #Table TR {Text-Align: Center; } tbody tr: nth-child (2n+1) {background-color: #ccc; } tbody tr: hover {background-color: verde; } entrada [type = text] {Height: 25px; Ancho: 136px; Color de fondo: turquesa; margen-fondo: 10px; } </style> <script type = "text/javaScript"> window.onload = function () {var otb = document.getElementById ("table"); var oTr = otb.tbodies [0] .Rows; var oadd = document.getElementById ("agregar"); var oneme = document.getElementById ('nombre'); var osex = document.getElementById ('sexo'); 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> eliminar </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.TBODES [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 (remera [j])! =-1) {otb.tbodies [0] .Rows [i] .style.background = 'rojo'; }}}}}}}} </script> </head> <body> <input type = "text" placeholder = "Por favor, ingrese el contenido de búsqueda" id = "ss"/> <input type = "button" value = "consulter" id = "btn"/> <br/> name: <input type = "text" id = "nombre"/> género: género: <input type = "text" id = "sexo"/"sexo" sexo "/" sexo "/" sexo "/" button "/" sexo "/" button "/" sexo "/" butin "/" sexo "/" sexo "/" butin " valor = "agregar" id = "add"/> <table id = "table"> <ttrun> <td> número de serie </td> <td> name de las personas </td> <td> género </td> <td> modificar </td> </tr> <trbody> <tr> <tr> <td> 1 </td> <td> zhang san </td> </td> <Td> delete </td> </tr> <tr> <tr> <td> 2 </td> <td> li si </td> <td> masculino </td> <td> delete <TD> Delete </td> </tr> <td> 4 </td> <td> liu yan </td> <td> femenino </td> <td> delete </td> </tr> </tbody> </head> </table> </body> </html>>Lo anterior se trata de este artículo, espero que sea útil para el aprendizaje de todos.