DOM高级

一、表格应用

thead、tbody、tfoot

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

var oTab=document.getElementById('tab1');
    var oBtn=document.getElementById('btn1');
    var oTxt=document.getElementById('txt1');
    var iNowId=oTab.tBodies[0].rows.length+1;//创建一个变量来设置行号
    var oldBgColor='';//创建一个变量存储原来的颜色
    
    var ctx=oTab.tBodies[0].rows[0].cells[1].innerHTML;//alert(ctx);
    var i=0;console.log(oTab.tBodies[0]);
    for(i=0;i<oTab.tBodies[0].rows.length;i++){
        oTab.tBodies[0].rows[i].style.background=i%2?'#fee':'';//隔行变色
        //移入高亮//oTab.tBodies[0].rows[i].index=i;
        oTab.tBodies[0].rows[i].onmouseover=function(){
            oldBgColor=this.style.background;
            this.style.background='yellow';
        }
        oTab.tBodies[0].rows[i].onmouseout=function(){
            //this.style.background=this.index%2?'#fee':'';
            this.style.background=oldBgColor;
        }
    }
    
    oBtn.onclick=function(){
        var oTr=document.createElement('tr');
        var oTd=null;
        
        oTd=document.createElement('td');
        oTd.innerHTML=iNowId;
        iNowId++;
        oTr.appendChild(oTd);
        
        oTd=document.createElement('td');
        oTd.innerHTML=oTxt.value;
        oTr.appendChild(oTd);
        
        oTd=document.createElement('td');
        oTd.innerHTML='<a href="javascript:;">Delete</a>';
        oTr.appendChild(oTd);
        
        oTd.getElementsByTagName('a')[0].onclick=function(){
            oTab.tBodies[0].removeChild(this.parentNode.parentNode);
        }
        
        oTab.tBodies[0].appendChild(oTr);
    }

2.搜索

        var i=0;
        
        for(i=0;i<oTab.tBodies[0].rows.length;i++){//console.log(oTab.tBodies[0].rows[1].cells[1].innerHTML);
        
        var txtValue=oTxt.value.toLowerCase();//目标值转换成小写
        var tabValue=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
        var arr=txtValue.split(' ');console.log(txtValue+'--'+arr);
        var bFound=false;//设置一个变量用来判断是否搜到
        
            for(var j=0;j<arr.length;j++){
                if(tabValue.search(arr[j])!=-1 && arr[0]){alert(tabValue.search(arr[j]));
                    bFound=true;
                    break;
                }
            }
            
            if(bFound){//不区分大小写搜索
                oTab.tBodies[0].rows[i].style.background='red';
            }else{
                oTab.tBodies[0].rows[i].style.background='';
            }
        }

二、排序

var bAsc=true;//设置一个变量来控制升降序
    
    oBtn.onclick=function(){
        var aLi=oUl1.getElementsByTagName('li');//oUl1.appendChild(aLi[0]);
        
        //1.转成数组
        var arr=[];
        var i=0;
        for(i=0;i<aLi.length;i++){
            arr[i]=aLi[i];
        }
        //2.数组排序
        arr.sort(function(li1,li2){
            if(bAsc){
                return parseInt(li1.innerHTML)-parseInt(li2.innerHTML);
            }else{
                return parseInt(li2.innerHTML)-parseInt(li1.innerHTML);
            }
        });
        
        //3.重新插入
        for(i=0;i<arr.length;i++){
            oUl1.appendChild(arr[i]);
        }
        bAsc=!bAsc;//实现升降序转换
    };

三、表单

var oForm=document.getElementById('form1');
    var oUser=document.getElementsByName('user')[0];
    var oPass=document.getElementsByName('pass')[0];    
    
    oForm.onsubmit=function(){
        if(oUser.value=='' || oPass.value==''){
            return false;//用来阻止默认事件就用return false
        }
    }
    oForm.onreset=function(){
        return confirm('Y OR N');
    }