精通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');
    };
};