精通JavaScript开发课时13-14（DOM操作应用）笔记

一、表格应用

一、获取表格元素的简便写法：

• tBodies[] —> getElementByTagName(‘tbody’)[]
• tHead —> getElementByTagName(‘thead’)
• tFoot —> getElementByTagName(‘tFoot’)
• rows[] —> getElementByTagName(‘tr’)[]
• cells[] —> getElementByTagName(‘td’)[]

---

二、隔行变色，鼠标移入高亮，移出还原

window.onload=function (){    var oTab=document.getElementById('tab1');    var oldColor='';    for(var i=0;i<oTab.tBodies[0].rows.length;i++)    {        oTab.tBodies[0].rows[i].onmouseover=function ()        {            oldColor=this.style.background;            this.style.background='green';        };        oTab.tBodies[0].rows[i].onmouseout=function ()        {            this.style.background=oldColor;        };        if(i%2)        {            oTab.tBodies[0].rows[i].style.background='';        }        else        {            oTab.tBodies[0].rows[i].style.background='#CCC';        }    }};

---

三、添加、删除一行

添加一行：

window.onload=function (){    var oTab=document.getElementById('tab1');    var oBtn=document.getElementById('btn1');    var oName=document.getElementById('name');    var oAge=document.getElementById('age');    oBtn.onclick=function ()    {        var oTr=document.createElement('tr');//创建一行tr        var oTd=document.createElement('td');        oTd.innerHTML=oTab.tBodies[0].rows.length+1;//添加的ID为之前的行数加1         oTr.appendChild(oTd);        var oTd=document.createElement('td');        oTd.innerHTML=oName.value;        oTr.appendChild(oTd);        var oTd=document.createElement('td');        oTd.innerHTML=oAge.value        oTr.appendChild(oTd);        oTab.tBodies[0].appendChild(oTr);//添加这个tr到tbody中    };};

可删除添加的行，被删除的ID不会再次使用

window.onload=function (){    var oTab=document.getElementById('tab1');    var oBtn=document.getElementById('btn1');    var oName=document.getElementById('name');    var oAge=document.getElementById('age');    var id=oTab.tBodies[0].rows.length+1;//每次添加后id加1    oBtn.onclick=function ()    {        var oTr=document.createElement('tr');        var oTd=document.createElement('td');        oTd.innerHTML=id++; //用id处理ID的问题        oTr.appendChild(oTd);        var oTd=document.createElement('td');        oTd.innerHTML=oName.value;        oTr.appendChild(oTd);        var oTd=document.createElement('td');        oTd.innerHTML=oAge.value;        oTr.appendChild(oTd);        var oTd=document.createElement('td');        oTd.innerHTML='<a href="javascript:;">删除</a>';        oTr.appendChild(oTd);//添加一个删除选项        oTd.getElementsByTagName('a')[0].onclick=function ()        {            oTab.tBodies[0].removeChild(this.parentNode.parentNode);        };//删除某行        oTab.tBodies[0].appendChild(oTr);    };};

---

四、表格搜索
版本2：忽略大小写

window.onload=function (){    var oTab=document.getElementById('tab1');    var oTxt=document.getElementById('name');    var oBtn=document.getElementById('btn1');    oBtn.onclick=function ()    {        for(var i=0;i<oTab.tBodies[0].rows.length;i++)        {            var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML;            var sTxt=oTxt.value;            if(sTab.toLowerCase()==sTxt.toLowerCase())//用toLowerCase()忽略大小写            {                oTab.tBodies[0].rows[i].style.background='yellow';//选中高亮            }            else            {                oTab.tBodies[0].rows[i].style.background='';//未中            }        }    };};

版本3：模糊搜索（搜索内容不全）

使用sTab.search(sTxt)，返回值为sTxt在sTab中的位置，返回-1表示sTxt不在sTab中。

for(var i=0;i<oTab.tBodies[0].rows.length;i++){    var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();    var sTxt=oTxt.value.toLowerCase();    if(sTab.search(sTxt)!=-1)    {        oTab.tBodies[0].rows[i].style.background='yellow';    }    else    {        oTab.tBodies[0].rows[i].style.background='';    }}

版本4：多关键词搜索
用split()将搜索的关键词分开，分别进行搜索

for(var i=0;i<oTab.tBodies[0].rows.length;i++){    var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();    var sTxt=oTxt.value.toLowerCase();    var arr=sTxt.split(' ');//分出关键词    oTab.tBodies[0].rows[i].style.background='';    for(var j=0;j<arr.length;j++)//分别搜索    {        if(sTab.search(arr[j])!=-1)        {            oTab.tBodies[0].rows[i].style.background='yellow';        }    }}

五、li排序
实现appendChild()：
1.先把元素从原有父级上删掉；
2.再添加到新的父级；
所以不需要先removeChild再appendChild。

window.onload=function (){    var oUl1=document.getElementById('ul1');    var oBtn=document.getElementById('btn1');    oBtn.onclick=function ()    {        var aLi=oUl1.getElementsByTagName('li');        //aLi.sort();//aLi不是数组，不能用sort        var arr=[];        for(var i=0;i<aLi.length;i++)        {            arr[i]=aLi[i];//转成数组        }        arr.sort(function (li1, li2){            var n1=parseInt(li1.innerHTML);            var n2=parseInt(li2.innerHTML);            return n1-n2;        });//使用sort()排序        //alert(arr[0].innerHTML);        for(var i=0;i<arr.length;i++)        {            alert('该把'+arr[i].innerHTML+'插入到最后');            oUl1.appendChild(arr[i]);        }//重新放入ul里    };};

同理，表格的排序和上面一样

var arr=[];for(var i=0;i<oTab.tBodies[0].rows.length;i++){    arr[i]=oTab.tBodies[0].rows[i];}arr.sort(function (tr1, tr2){    var n1=parseInt(tr1.cells[0].innerHTML);    var n2=parseInt(tr2.cells[0].innerHTML);    return n1-n2;});for(var i=0;i<arr.length;i++){    oTab.tBodies[0].appendChild(arr[i]);}

二、表单事件（入门）

• onsubmit——提交时发生
• onreset——重置时发生

对于表单，后台通过name属性识别元素：

<form id="form1" action="http://www.zhinengshe.com/">    用户名：<input type="text" name="user" /><br>    密码：<input type="password" name="pass" />    <input type="submit" />    <input type="reset" /></form></body>

js代码如下：

window.onload=function (){    var oForm=document.getElementById('form1');    oForm.onsubmit=function ()    {        alert('aaa');    };    oForm.onreset=function ()    {        alert('bbbbbb');    };};