关闭

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

标签: 学习笔记
130人阅读 评论(0) 收藏 举报

一、表格应用

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

  • 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');
    };
};
1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1118次
    • 积分:74
    • 等级:
    • 排名:千里之外
    • 原创:6篇
    • 转载:1篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档