DOM操作应用高级-表格的应用
DOM操作应用高级
获取表格
tBodies、tHead、tFoot、
rows获取行 cells获取td
隔行变色
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Dom-隔行变色</title> 6 <style type="text/css"> 7 8 </style> 9 10 <script type="text/javascript"> 11 window.onload=function(){ 12 var oTab=document.getElementById('tab1') 13 var oldColor=''; 14 function toColor(){ 15 //getElementsByTagName("tbody")[0]=tBodies[0] 16 for(var i=0;i<oTab.tBodies[0].rows.length;i++){ 17 //隔行变色 18 oTab.tBodies[0].rows[i].onmouseover=function(){ 19 //鼠标移入变色 20 oldColor=this.style.background; 21 this.style.background='yellow'; 22 }; 23 oTab.tBodies[0].rows[i].onmouseout=function(){ 24 //鼠标移出恢复原来颜色 25 this.style.background="pink"; 26 } 27 if(i%2){ 28 oTab.tBodies[0].rows[i].style.background=''; 29 } 30 else{ 31 oTab.tBodies[0].rows[i].style.background='#ccc'; 32 } 33 } 34 } 35 toColor(); 36 } 37 </script> 38 </head> 39 <body> 40 <table border="1" id="tab1" width="500"> 41 <thead> 42 <td>ID</td> 43 <td>姓名</td> 44 <td>年龄</td> 45 </thead> 46 <tbody> 47 <tr> 48 <td>1</td> 49 <td>张三</td> 50 <td>34</td> 51 </tr> 52 <tr> 53 <td>2</td> 54 <td>李四</td> 55 <td>11</td> 56 </tr> 57 <tr> 58 <td>3</td> 59 <td>王五</td> 60 <td>34</td> 61 </tr> 62 <tr> 63 <td>4</td> 64 <td>李麻子</td> 65 <td>39</td> 66 </tr> 67 <tr> 68 <td>5</td> 69 <td>HuHansan</td> 70 <td>39</td> 71 </tr> 72 </tbody> 73 </table> 74 </body> 75 </html>
表格的添加删除
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>DOM：表单</title> 6 7 <script> 8 function toDou(n){ 9 if(n<10){ 10 return '0'+n; 11 } 12 else{ 13 return ''+n; 14 } 15 } 16 window.onload=function(){ 17 var oTxt1=document.getElementById("txt1"); 18 var oTxt2=document.getElementById("txt2"); 19 var oBtn=document.getElementById("btn1"); 20 var oTab=document.getElementById('tab1'); 21 22 //获取系统时间 23 var oDate=new Date(); 24 var iYear=oDate.getFullYear();//年 25 var iMonth=oDate.getMonth();//月 26 var iDate=oDate.getDate();//日 27 var str=''+iYear+'-'+toDou(iMonth+1)+'-'+toDou(iDate)+' '+toDou(oDate.getHours())+':'+toDou(oDate.getMinutes())+':'+toDou(oDate.getSeconds()); 28 29 var id1=oTab.tBodies[0].rows.length+1; 30 31 oBtn.onclick=function(){ 32 var oTr=document.createElement('tr'); 33 var oTd=document.createElement('td'); 34 oTd.innerHTML=id1++; 35 oTr.appendChild(oTd); 36 var oTd=document.createElement('td'); 37 oTd.innerHTML=oTxt1.value; 38 oTr.appendChild(oTd); 39 var oTd=document.createElement('td'); 40 oTd.innerHTML=oTxt2.value; 41 oTr.appendChild(oTd); 42 var oTd=document.createElement('td'); 43 oTd.innerHTML=str; 44 oTr.appendChild(oTd); 45 var oTd=document.createElement('td'); 46 oTd.innerHTML='<a href="javascript:;">删除</a>'; 47 oTr.appendChild(oTd); 48 49 oTab.tBodies[0].appendChild(oTr); 50 51 oTd.getElementsByTagName('a')[0].onclick=function(){ 52 oTab.tBodies[0].removeChild(this.parentNode.parentNode); 53 }; 54 }; 55 56 }; 57 </script> 58 </head> 59 60 <body> 61 姓名：<input type="text" id="txt1" /> 62 内容：<input type="text" id="txt2" /> 63 <input type="button" id="btn1" value="添加"/> 64 <br/><br/> 65 <table id="tab1" border="1px" width="500px"> 66 <thead> 67 <th>ID</th> 68 <th>姓名</th> 69 <th>内容</th> 70 <th>发布时间</th> 71 <th>操作</th> 72 </thead> 73 <tbody> 74 </tbody> 75 </table> 76 </body> 77 </html>
表格搜索
搜索 版本1：基础版本——字符串比较
版本2：忽略大小写——大小写转换 toLowerCase()变成小写
toUpperCase()变成大写 例子：var str='ABC'; alert(str.toLowerCase());
版本3：模糊搜索——search的使用
方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。
search();
例子：
var str='ABC'; alert(str.search('A')); //弹出的是0
var str='ABC'; alert(str.search('B')); //弹出的是1
var str='ABC'; alert(str.search('a')); //弹出的是-1 如果没有找到任何匹配的子串，则返回 -1。
var str='ABC'; alert(str.search(/a/i)); //忽略大小写的搜索方法
版本4：多关键词——split 高亮显示、筛选
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <script> 7 window.onload=function () 8 { 9 var oTab=document.getElementById('tab1'); 10 var oTxt=document.getElementById('name'); 11 var oBtn=document.getElementById('btn1'); 12 13 oBtn.onclick=function (){ 14 for(var i=0; i<oTab.tBodies[0].rows.length; i++){ 15 var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase(); 16 var sTxt=oTxt.value.toLowerCase(); 17 var arr=sTxt.split(' '); 18 19 oTab.tBodies[0].rows[i].style.display='none'; 20 21 for(var j=0;j<arr.length;j++){ 22 if(sTab.search(arr[j])!=-1){ 23 oTab.tBodies[0].rows[i].style.display='block'; 24 } 25 } 26 } 27 } 28 } 29 </script> 30 </head> 31 32 <body> 33 姓名：<input id="name" type="text" /> 34 <input id="btn1" type="button" value="搜索" /> 35 <table id="tab1" border="1" width="500"> 36 <thead> 37 <td>ID</td> 38 <td>姓名</td> 39 <td>年龄</td> 40 <td>操作</td> 41 </thead> 42 <tbody> 43 <tr> 44 <td>1</td> 45 <td>Blue</td> 46 <td>27</td> 47 <td></td> 48 </tr> 49 <tr> 50 <td>2</td> 51 <td>蜡笔小新</td> 52 <td>23</td> 53 <td></td> 54 </tr> 55 <tr> 56 <td>3</td> 57 <td>哆啦A梦</td> 58 <td>28</td> 59 <td></td> 60 </tr> 61 <tr> 62 <td>4</td> 63 <td>奥特曼</td> 64 <td>25</td> 65 <td></td> 66 </tr> 67 <tr> 68 <td>5</td> 69 <td>比卡丘</td> 70 <td>24</td> 71 <td></td> 72 </tr> 73 <tr> 74 <td>6</td> 75 <td>犬夜叉</td> 76 <td>24</td> 77 <td></td> 78 </tr> 79 </tbody> 80 </table> 81 </body> 82 </html>
表格排序
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <script> 7 window.onload=function (){ 8 var oTab=document.getElementById('tab1'); 9 var oBtn=document.getElementById('btn1'); 10 11 oBtn.onclick=function (){ 12 var arr=[];//定义一个空数组 13 14 for(var i=0;i<oTab.tBodies[0].rows.length;i++){ 15 arr[i]=oTab.tBodies[0].rows[i];//把表格里的内容传到数组里 16 } 17 18 arr.sort(function (tr1, tr2){//传参两个数 比较 19 var n1=parseInt(tr1.cells[0].innerHTML); 20 var n2=parseInt(tr2.cells[0].innerHTML); 21 22 return n1-n2;//从小到大排列 若从大到小return n2-n1 23 }); 24 25 for(var i=0;i<arr.length;i++){ 26 oTab.tBodies[0].appendChild(arr[i]); 27 } 28 } 29 }; 30 </script> 31 </head> 32 33 <body> 34 <input id="btn1" type="button" value="排序" /> 35 <table id="tab1" border="1" width="500"> 36 <thead> 37 <td>ID</td> 38 <td>姓名</td> 39 <td>年龄</td> 40 <td>操作</td> 41 </thead> 42 <tbody> 43 <tr> 44 <td>2</td> 45 <td>皮卡丘</td> 46 <td>23</td> 47 <td></td> 48 </tr> 49 <tr> 50 <td>6</td> 51 <td>哆啦A梦</td> 52 <td>24</td> 53 <td></td> 54 </tr> 55 <tr> 56 <td>1</td> 57 <td>Blue</td> 58 <td>27</td> 59 <td></td> 60 </tr> 61 <tr> 62 <td>5</td> 63 <td>犬夜叉</td> 64 <td>24</td> 65 <td></td> 66 </tr> 67 <tr> 68 <td>3</td> 69 <td>奥特曼</td> 70 <td>28</td> 71 <td></td> 72 </tr> 73 <tr> 74 <td>4</td> 75 <td>蜡笔小新</td> 76 <td>25</td> 77 <td></td> 78 </tr> 79 </tbody> 80 </table> 81 </body> 82 </html>
