이 기사에서는 참조를 위해 JS 테이블을 작동하는 간단한 방법을 공유합니다. 특정 내용은 다음과 같습니다
<! doctype html> <html> <head> <meta charset = "utf-8" /> <title> zzzz < /title> <style> *{마진 : 0; 패딩 : 0; } body {너비 : 1000px; 마진 : 100px 자동; Font-Family : "Microsoft Yahei"; 글꼴 크기 : 18px; 배경색 : #fff; } #table tr {Text-Align : 중심; } tbody tr : nth-Child (2n+1) {배경색 : #ccc; } tbody tr : 호버 {배경색 : 녹색; } 입력 [type = 텍스트] {높이 : 25px; 너비 : 136px; 배경색 : 청록색; 마진 바닥 : 10px; }. var otr = otb.tbodies [0] .rows; var oadd = document.getElementById ( "add"); var oneme = document.getElementById ( 'name'); 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> delete </a>'; atd1.innerhtml = id ++; atd2.innerhtml = oname.value; atd3.innerhtml = osx.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.tolowscase (); var ot = otxt.value.tolowercase (); var oar = ot.split ( ''); otb.tbodies [0] .rows [i] .style.background = ''; for (var j = 0; }}}}}}}}} </script> </script> </head> <body> <input type = "text"placeholder = "검색 내용을 입력하십시오"id = "ss"/> <input type = "value ="query "id ="btn "/> <br/> 이름 : <input type ="text ""name "/> gender : <입력 유형 = "button"value = "add"id = "add"/> <table id = "table"> <ttrun> <td> 일련 번호 </td> 사람들 이름 </td> <td> gender </td> <td> modify </td> </td> <tbody> <td> 1 </td> <td> Zhang </td> <td> male </td> <td> delete </td> </td> </td> <td> 2 </td> <td> li si </td> <td> male </td> <td> delete </td> </td> <td> delete </td> <td> 3 </td> <td> <td> 여성 </td> <td> delete </td> </td> <td> 4 </td> <td> liu yan </td> <td> 여성 </td> <td> delete </td> </td> </tbody> </head> </body> </html>위의 내용은이 기사에 관한 모든 것입니다. 모든 사람의 학습에 도움이되기를 바랍니다.