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

原创 2015年07月08日 16:35:03

一、表格应用

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

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

智能社JavaScript学习笔记——13/14 - DOM操作应用 - 高级

表格应用1. 获取tBodies、tHead、tFoot、rows、cells 注意: 一个表格可以有多个tbody (所以tBodies是复数,是一个数组),但是只能有一个thead,一个tfoo...
  • namei33
  • namei33
  • 2015年06月03日 03:45
  • 707

精通JavaScript开发课时11(DOM基础)笔记

一、DOM基础1、什么是DOM Document Object Model定义了访问和处理 HTML 文档的标准方法2、浏览器支持情况 IE 10% Chrome/Safari 60% F...

精通JavaScript开发课时20(JS事件基础)学习笔记

一、event对象和事件冒泡1、什么是event对象 用来获取事件的详细信息:鼠标位置、键盘按键 例如:获取鼠标位置:clientXwindow.onload=function () { ...

智能社JavaScript学习笔记——12-DOM操作应用

创建、插入和删除元素1. 创建DOM元素createElement(标签名) 创建一个节点 appendChild(节点) 追加一个节点 (添加到末尾) //父级....
  • namei33
  • namei33
  • 2015年05月28日 16:23
  • 395

JavaScript基础(13.Dom内容文本操作)

先随意写一个HTML: html> lang="en"> charset="UTF-8"> Title id="i1"> 某电 百度 打开Conso...

day14:JavaScript DOM编程学习笔记06

十一、节点的替换 11.1replaceChild():把一个给定父元素里的一个子节点替换为另一个子节点        var reference=element.replaceChild(new...

day13:JavaScript DOM编程学习笔记05

十、为元素节点添加子节点 10.1appendChild(): varreference=element.appendChild(newChild): 给定子节点newChild将成为给定元素节...

第14课时 DOM基础概念、操作

DOM:Document object Model 文档对象模型 文档:html页面 文档对象:页面中元素 文档对象模型:定义 为了能够让程序(js)去操作页面中打个元素。 DOM会把文档看做是一棵树...

蓝鸥Unity开发教程之课时14 刚体

蓝鸥Unity开发教程之课时14 刚体
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:精通JavaScript开发课时13-14(DOM操作应用)笔记
举报原因:
原因补充:

(最多只允许输入30个字)