一个能给添加行的表格
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> .table{width:100%; border:1px solid #eee; border-collapse:collapse;} .table > tbody > tr{} .table > tbody > tr > td{text-align:center; border:1px solid #eee;} </style> <script> window.onload = function(){ var testTable = document.getElementById("testTable"); var testBtn = document.getElementById("testBtn"); var test1 = document.getElementById("test1"); var test2 = document.getElementById("test2"); testBtn.onclick = function(){ var oTr = document.createElement("tr"); var oTd1 = document.createElement("td"); oTd1.innerHTML = testTable.tBodies[0].rows.length + 1; oTr.appendChild(oTd1); var oTd2 = document.createElement("td"); oTd2.innerHTML = test1.value; oTr.appendChild(oTd2); var oTd3 = document.createElement("td"); oTd3.innerHTML = test2.value; oTr.appendChild(oTd3); testTable.tBodies[0].appendChild(oTr); }; }; </script> </head> <body> test1:<input id="test1" type="text" /> test2:<input id="test2" type="text" /> <input id="testBtn" type="button" value="ADD" /> <table class="table" id="testTable"> <thead> <tr> <th>test</th> <th>test</th> <th>test</th> </tr> </thead> <tbody> <tr> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> </tr> </tbody> </table> </body> </html>
一个能添加行又能删除行的表格
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> .table{width:100%; border:1px solid #eee; border-collapse:collapse;} .table > tbody > tr{} .table > tbody > tr > td{text-align:center; border:1px solid #eee;} </style> <script> window.onload = function(){ var testTable = document.getElementById("testTable"); var testBtn = document.getElementById("testBtn"); var test1 = document.getElementById("test1"); var test2 = document.getElementById("test2"); var id = testTable.tBodies[0].rows.length + 1; testBtn.onclick = function(){ var oTr = document.createElement("tr"); var oTd1 = document.createElement("td"); oTd1.innerHTML = id; id++; oTr.appendChild(oTd1); var oTd2 = document.createElement("td"); oTd2.innerHTML = test1.value; oTr.appendChild(oTd2); var oTd3 = document.createElement("td"); oTd3.innerHTML = test2.value; oTr.appendChild(oTd3); var oTd4 = document.createElement("td"); oTd4.innerHTML = '<a href="javascript:;">delete</a>'; oTr.appendChild(oTd4); oTd4.getElementsByTagName("a")[0].onclick = function(){ testTable.tBodies[0].removeChild(this.parentNode.parentNode); }; testTable.tBodies[0].appendChild(oTr); }; }; </script> </head> <body> test1:<input id="test1" type="text" /> test2:<input id="test2" type="text" /> <input id="testBtn" type="button" value="ADD" /> <table class="table" id="testTable"> <thead> <tr> <th>test</th> <th>test</th> <th>test</th> <th>option</th> </tr> </thead> <tbody> <tr> <td>test</td> <td>test</td> <td>test</td> <td></td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> <td></td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> <td></td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> <td></td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> <td></td> </tr> </tbody> </table> </body> </html>
一个能搜索的表格
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> .table{width:100%; border:1px solid #eee; border-collapse:collapse;} .table > tbody > tr{} .table > tbody > tr > td{text-align:center; border:1px solid #eee;} </style> <script> window.onload = function(){ var testTable = document.getElementById("testTable"); var txt = document.getElementById("s_text"); var btn = document.getElementById("search"); btn.onclick = function(){ for(var i=0;i<testTable.tBodies[0].rows.length;i++){ if(testTable.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase() == txt.value.toLowerCase()){ testTable.tBodies[0].rows[i].style.background = "yellow"; }else{ testTable.tBodies[0].rows[i].style.background = ""; } } }; }; </script> </head> <body> test:<input id="s_text" type="text" /> <input id="search" type="button" value="Search" /> <table class="table" id="testTable"> <thead> <tr> <th>test</th> <th>test</th> <th>test</th> <th>option</th> </tr> </thead> <tbody> <tr> <td>test1</td> <td>test2</td> <td>test3</td> <td></td> </tr> <tr> <td>test4</td> <td>test5</td> <td>test6</td> <td></td> </tr> <tr> <td>test1</td> <td>test2</td> <td>test3</td> <td></td> </tr> <tr> <td>test4</td> <td>test5</td> <td>test6</td> <td></td> </tr> <tr> <td>test1</td> <td>test2</td> <td>test3</td> <td></td> </tr> </tbody> </table> </body> </html>
除此之外还可以使用search()进行模糊搜索，用split()进行多关键词搜索。
我们可以对表格提供排序服务，我们可以模拟一个List，Table和它的写法一样。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> .table{width:100%; border:1px solid #eee; border-collapse:collapse;} .table > tbody > tr{} .table > tbody > tr > td{text-align:center; border:1px solid #eee;} </style> <script> window.onload = function(){ var nl = document.getElementById("numberList"); var btn = document.getElementById("order"); btn.onclick = function(){ var aLi = nl.getElementsByTagName("li"); var arr = []; for(var i=0;i<aLi.length;i++ ){ arr[i] = aLi[i]; } arr.sort(function(l1,l2){ var n1 = parseInt(l1.innerHTML); var n2 = parseInt(l2.innerHTML); return n1 - n2; }); for(var i=0;i<arr.length;i++){ nl.appendChild(arr[i]); } }; }; </script> </head> <body> <input id="order" type="button" value="Order" /> <ul id="numberList"> <li>21</li> <li>88</li> <li>45</li> <li>17</li> <li>3</li> </ul> </body> </html>