表格的应用
<table> 标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
<script> window.onload=function() { var tab=document.getElementById('tab'); alert(tab.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[2].getElementsByTagName('td')[1].innerHTML); } </script>
表格具备的简便操作：getElementsByTagName('tbody')=tBodies, getElementsByTagName('tr')=rows, getElementsByTagName('td')=cells,
<script> window.onload=function() { var tab=document.getElementById('tab'); alert(tab.tBodies[0].rows[2].cells[1].innerHTML); } </script>
<body> <table id="tab" border="1" width="400"> <thead> <td>ID</td> <td>name</td> <td>sex</td> </thead> <tbody> <tr> <td>1</td> <td>red</td> <td></td> </tr> <tr> <td>2</td> <td>green</td> <td></td> </tr> <tr> <td>3</td> <td>blue</td> <td></td> </tr> </tbody> </table> </body>
表格中的隔行变色
for(i=0;i<tab.tBodies[0].rows.length;i++) { tab.tBodies[0].rows[i].style.background=i%2?"#ccc":""; }
鼠标移入移出表格高亮情况
var tab=document.getElementById('tab'); var oldBgColor=""; var i=0; for(i=0;i<tab.tBodies[0].rows.length;i++) { tab.tBodies[0].rows[i].style.background=i%2?"#ccc":""; tab.tBodies[0].rows[i].onmouseover=function() { oldBgColor=this.style.background; this.style.background="yellow"; }; tab.tBodies[0].rows[i].onmouseout=function() { this.style.background=oldBgColor; } }
添加、删除
• DOM方法的使用
1 <script> 2 window.onload=function() 3 { 4 var tab=document.getElementById('tab'); 5 var txt=document.getElementById('txt'); 6 var btn=document.getElementById('btn'); 7 var iNowId=tab.tBodies[0].rows.length+1; 8 9 btn.onclick=function() 10 { 11 var tr=document.createElement('tr'); 12 var td=null; 13 14 td=document.createElement('td'); 15 td.innerHTML=iNowId++; 16 tr.appendChild(td); 17 18 td=document.createElement('td'); 19 td.innerHTML=txt.value; 20 tr.appendChild(td); 21 22 td=document.createElement('td'); 23 td.innerHTML="<a href='javascript:;'>删除</a>"; 24 tr.appendChild(td); 25 26 td.getElementsByTagName('a')[0].onclick=function() 27 { 28 tab.tBodies[0].removeChild(this.parentNode.parentNode); 29 } 30 31 tab.tBodies[0].appendChild(tr); 32 33 } 34 35 } 36 </script>
<body> <input id="txt" type="text"/> <input id="btn" type="button" value="添加"/> <table id="tab" border="1" width="400"> <thead> <td>ID</td> <td>name</td> <td>操作</td> </thead> <tbody> <tr> <td>1</td> <td>red</td> <td></td> </tr> <tr> <td>2</td> <td>green</td> <td></td> </tr> <tr> <td>3</td> <td>blue</td> <td></td> </tr> <tr> <td>4</td> <td>black</td> <td></td> </tr> <tr> <td>5</td> <td>yellow</td> <td></td> </tr> </tbody> </table> </body>
搜索表格中的关键词所在的行
1 <script> 2 window.onload=function() 3 { 4 var tab=document.getElementById('tab'); 5 var btn=document.getElementById('btn'); 6 var txt=document.getElementById('txt'); 7 8 btn.onclick=function() 9 { 10 var i=0; 11 for(i=0;i<tab.tBodies[0].rows.length;i++) 12 { 13 //忽略大小写——toLowerCase() 14 var sValueInTab=tab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase(); 15 var sValueInTxt=txt.value.toLowerCase(); 16 17 var arr=sValueInTxt.split(' ');//切割字符窜 18 var bFond=false; 19 //判断多个关键词的搜索 20 for(var j=0;j<arr.length;j++) 21 { 22 if(sValueInTab.search(arr[j])!=-1)//判断字符窜在arr里面 23 { 24 bFond=true; 25 break; 26 } 27 } 28 //判断关键词在哪一行 29 if(bFond) 30 { 31 tab.tBodies[0].rows[i].style.background='yellow'; 32 } 33 else 34 { 35 tab.tBodies[0].rows[i].style.background=''; 36 } 37 } 38 } 39 } 40 </script>
排序
1.转成数组
2.数组排序
3.重新插入
示例
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>未命名</title> 6 <script> 7 window.onload=function() 8 { 9 10 var ul1=document.getElementById('ul1'); 11 var btn=document.getElementById('btn'); 12 13 btn.onclick=function() 14 { 15 ali=ul1.getElementsByTagName('li'); 16 var arr=[]; 17 var i=0; 18 19 //ali本身不能排序，--转成数组 20 for(i=0; i<ali.length; i++) 21 { 22 arr[i]=ali[i]; 23 } 24 //数组排序 25 arr.sort(function(li1, li2){ 26 return parseInt(li1.innerHTML)-parseInt(li2.innerHTML) 27 }); 28 29 //重新插入 30 for(i=0; i<ali.length; i++) 31 { 32 ul1.appendChild(arr[i]); 33 } 34 } 35 } 36 37 38 </script> 39 </head> 40 <body> 41 <input id="btn" type="button" value="排序"/> 42 <ul id="ul1"> 43 <li>33</li> 44 <li>9</li> 45 <li>12</li> 46 <li>5</li> 47 <li>66</li> 48 </ul> 49 </body> 50 </html>
表格中的排序应用
示例
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>未命名</title> 6 <script> 7 window.onload=function() 8 { 9 var tab=document.getElementById('tab'); 10 var btn=document.getElementById('btn'); 11 var tt=false; 12 13 btn.onclick=function() 14 { 15 var arr=[]; 16 var i=0; 17 18 for(i=0; i<tab.tBodies[0].rows.length;i++) 19 { 20 arr[i]=tab.tBodies[0].rows[i]; 21 } 22 23 arr.sort(function(tr1, tr2){ 24 if(tt) 25 { 26 return parseInt(tr1.cells[0].innerHTML)-parseInt(tr2.cells[0].innerHTML); 27 } 28 else 29 { 30 return parseInt(tr2.cells[0].innerHTML)-parseInt(tr1.cells[0].innerHTML); 31 } 32 }) 33 34 for(i=0; i<arr.length; i++) 35 { 36 tab.tBodies[0].appendChild(arr[i]); 37 } 38 39 tt=!tt; 40 /* if(tt) 41 { 42 tt=false; 43 } 44 else 45 { 46 tt=true; 47 } */ 48 } 49 } 50 </script> 51 </head> 52 <body> 53 54 <input id="btn" type="button" value="排序"/> 55 <table id="tab" border="1" width="400"> 56 <thead> 57 <td>ID</td> 58 <td>name</td> 59 <td>操作</td> 60 </thead> 61 <tbody> 62 <tr> 63 <td>3</td> 64 <td>red</td> 65 <td></td> 66 </tr> 67 <tr> 68 <td>2</td> 69 <td>green</td> 70 <td></td> 71 </tr> 72 <tr> 73 <td>1</td> 74 <td>blue</td> 75 <td></td> 76 </tr> 77 <tr> 78 <td>5</td> 79 <td>black</td> 80 <td></td> 81 </tr> 82 <tr> 83 <td>4</td> 84 <td>yellow</td> 85 <td></td> 86 </tr> 87 </tbody> 88 </table> 89 </body> 90 </html>