Artikel ini berbagi metode sederhana untuk mengoperasikan tabel JS untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
<! Doctype html> <html> <head> <meta charset = "utf-8" /> <itement> zzzz </title> <tyle> *{margin: 0; Padding: 0; } body {width: 1000px; Margin: 100px Auto; Font-Family: "Microsoft Yahei"; font-size: 18px; Latar Belakang-Color: #FFF; } #table tr {text-align: center; } tBody tr: nth-child (2n+1) {latar belakang-warna: #ccc; } tbody tr: hover {latar belakang-color: green; } input [type = text] {height: 25px; Lebar: 136px; latar belakang-warna: pirus; margin-bottom: 10px; } </tyle> <script type = "text/javascript"> window.onload = function () {var otb = document.getElementById ("tabel"); 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> hapus </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 = ''; untuk (var j = 0; j <oar.length; j ++) {if (osta.search (oar [j])! =-1) {otb.tbodies [0] .rows [i] .style.background = 'merah'; }}}}}}}} </script> </head> <body> <input type = "text" placeholder = "Harap masukkan konten pencarian" id = "ss"/> <input type = "tombol" value = "query" id = "btn"/> <br/> name: <input type = "Text" id = "ID =" BTN " type = "Tombol" value = "add" id = "add"/> <table id = "Table"> <ttrun> <td> nomor seri </td> <td> Nama orang </td> <td> gender </td> <td> </td> </td> <td> <td> <td> <td> <td> </tdy </tdbody> <TD> <TD> <TD> </tdy </tdbody> <TD> <TD> <TD> </tdy </tbody> <TD> <TD> <TD> <TD> </TBID> <TDR> <TD> <TD> <TD> </tdy <td- san> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> </TD> <td> pria </td> <td> delete </td> </tr> <tr> <td> 2 </td> <td> Li si </td> <td> pria </td> <td> </td> </tr> <td> </td </td> </td> </td> <td> <td> <td> <td> <td> </td </td> </td> <td> <td> <td> <td> <td> <td> <td> <td> <td> <TD> </td </td> </td </td> </td </td> </td </td> </td </td <td> betina </td> <td> hapus </td> </tr> <td> 4 </td> <td> liu yan </td> <td> wanita </td> <td> </td> </tr> </tbody> </head> </table> </body> </htmDi atas adalah semua tentang artikel ini, saya harap ini akan membantu untuk pembelajaran semua orang.