บทความนี้แบ่งปันวิธีการง่าย ๆ ในการใช้งานตาราง JS สำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
<! doctype html> <html> <head> <meta charset = "utf-8" /> <title> zzzz < /title> <style> *{margin: 0; Padding: 0; } body {width: 1000px; มาร์จิ้น: 100px auto; Font-Family: "Microsoft Yahei"; ขนาดตัวอักษร: 18px; พื้นหลังสี: #FFF; } #table tr {text-allign: center; } tbody tr: nth-child (2n+1) {พื้นหลังสี: #ccc; } tbody tr: hover {พื้นหลังสี: สีเขียว; } อินพุต [type = text] {ความสูง: 25px; ความกว้าง: 136px; พื้นหลังสี: สีเขียวขุ่น; มาร์จิ้น-ก้น: 10px; } </style> <script type = "text/javascript"> window.onload = function () {var otb = document.getElementById ("ตาราง"); var otr = otb.tbodies [0] .rows; var oadd = document.getElementById ("เพิ่ม"); var oneme = document.getElementById ('ชื่อ'); var osex = document.getElementById ('เพศ'); 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> ลบ </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 attn = document.getElementById ("btn"); var otxt = document.getElementById ("SS"); obtn.onclick = function () {สำหรับ (var i = 0; i <otb.tbodies [0] .rows.length; i ++) {var osta = otb.tbodies [0] .rows [i] .cells [1] var ot = otxt.value.toLowerCase (); var oar = ot.split (''); otb.tbodies [0] .rows [i] .style.background = ''; สำหรับ (var j = 0; j <oar.length; j ++) {ถ้า (osta.search (oar [j])! =-1) {otb.tbodies [0] .rows [i] .style.background = 'สีแดง'; }}}}}}}} </script> </head> <body> <input type = "text" placeholder = "โปรดป้อนเนื้อหาการค้นหา" id = "ss"/> <อินพุต type = "ปุ่ม" value = "id =" btn "/> <br/> ชื่อ: < value = "เพิ่ม" id = "เพิ่ม"/> <table id = "ตาราง"> <ttrun> <td> หมายเลขซีเรียล </td> <td> ผู้คนชื่อ </td> <td> เพศ </td> <td> แก้ไข </td> </tbody> <td> <td> <td> <td> ลบ </td> </tr> <tr> <td> 2 </td> <td> li si </td> <td> ชาย </td> <td> ลบ </td> </tr> <td> ลบ </td> </td> <td> <td> ลบ </td> </tr> <td> 4 </td> <td> liu yan </td> <td> หญิง </td> <td> ลบ </td> </tr> </tbody> </head>ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน