DOM高级

一、表格应用

thead、tbody、tfoot

1.隔行变色、高亮、添加删除内容

 1 var oTab=document.getElementById('tab1');
 2     var oBtn=document.getElementById('btn1');
 3     var oTxt=document.getElementById('txt1');
 4     var iNowId=oTab.tBodies[0].rows.length+1;//创建一个变量来设置行号
 5     var oldBgColor='';//创建一个变量存储原来的颜色
 6     
 7     var ctx=oTab.tBodies[0].rows[0].cells[1].innerHTML;//alert(ctx);
 8     var i=0;console.log(oTab.tBodies[0]);
 9     for(i=0;i<oTab.tBodies[0].rows.length;i++){
10         oTab.tBodies[0].rows[i].style.background=i%2?'#fee':'';//隔行变色
11         //移入高亮//oTab.tBodies[0].rows[i].index=i;
12         oTab.tBodies[0].rows[i].onmouseover=function(){
13             oldBgColor=this.style.background;
14             this.style.background='yellow';
15         }
16         oTab.tBodies[0].rows[i].onmouseout=function(){
17             //this.style.background=this.index%2?'#fee':'';
18             this.style.background=oldBgColor;
19         }
20     }
21     
22     oBtn.onclick=function(){
23         var oTr=document.createElement('tr');
24         var oTd=null;
25         
26         oTd=document.createElement('td');
27         oTd.innerHTML=iNowId;
28         iNowId++;
29         oTr.appendChild(oTd);
30         
31         oTd=document.createElement('td');
32         oTd.innerHTML=oTxt.value;
33         oTr.appendChild(oTd);
34         
35         oTd=document.createElement('td');
36         oTd.innerHTML='<a href="javascript:;">Delete</a>';
37         oTr.appendChild(oTd);
38         
39         oTd.getElementsByTagName('a')[0].onclick=function(){
40             oTab.tBodies[0].removeChild(this.parentNode.parentNode);
41         }
42         
43         oTab.tBodies[0].appendChild(oTr);
44     }

2.搜索

 1         var i=0;
 2         
 3         for(i=0;i<oTab.tBodies[0].rows.length;i++){//console.log(oTab.tBodies[0].rows[1].cells[1].innerHTML);
 4         
 5         var txtValue=oTxt.value.toLowerCase();//目标值转换成小写
 6         var tabValue=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
 7         var arr=txtValue.split(' ');console.log(txtValue+'--'+arr);
 8         var bFound=false;//设置一个变量用来判断是否搜到
 9         
10             for(var j=0;j<arr.length;j++){
11                 if(tabValue.search(arr[j])!=-1 && arr[0]){alert(tabValue.search(arr[j]));
12                     bFound=true;
13                     break;
14                 }
15             }
16             
17             if(bFound){//不区分大小写搜索
18                 oTab.tBodies[0].rows[i].style.background='red';
19             }else{
20                 oTab.tBodies[0].rows[i].style.background='';
21             }
22         }

二、排序

 

 1 var bAsc=true;//设置一个变量来控制升降序
 2     
 3     oBtn.onclick=function(){
 4         var aLi=oUl1.getElementsByTagName('li');//oUl1.appendChild(aLi[0]);
 5         
 6         //1.转成数组
 7         var arr=[];
 8         var i=0;
 9         for(i=0;i<aLi.length;i++){
10             arr[i]=aLi[i];
11         }
12         //2.数组排序
13         arr.sort(function(li1,li2){
14             if(bAsc){
15                 return parseInt(li1.innerHTML)-parseInt(li2.innerHTML);
16             }else{
17                 return parseInt(li2.innerHTML)-parseInt(li1.innerHTML);
18             }
19         });
20         
21         //3.重新插入
22         for(i=0;i<arr.length;i++){
23             oUl1.appendChild(arr[i]);
24         }
25         bAsc=!bAsc;//实现升降序转换
26     };

三、表单

 1 var oForm=document.getElementById('form1');
 2     var oUser=document.getElementsByName('user')[0];
 3     var oPass=document.getElementsByName('pass')[0];    
 4     
 5     oForm.onsubmit=function(){
 6         if(oUser.value=='' || oPass.value==''){
 7             return false;//用来阻止默认事件就用return false
 8         }
 9     }
10     oForm.onreset=function(){
11         return confirm('Y OR N');
12     }

 

posted on 2013-12-27 21:46  狂流  阅读(306)  评论(0)  编辑  收藏  举报