精通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开发课时11(DOM基础)笔记

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

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

创建、插入和删除元素1. 创建DOM元素createElement(标签名) 创建一个节点 appendChild(节点) 追加一个节点 (添加到末尾) //父级....

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笔记(十七) DOM操作表格及样式

DOM操作表格及样式 DOM在操作生成HTML上,还是比较简明的。不过,由于浏览器总是存在兼容和陷阱,导致最终的操作就不是那么简单方便了。本章主要了解一下DOM操作表格和样式的一些知识。   一...

JavaScript DOM高级程序设计笔记__(二)----第四章 响应用户操作和事件

序言     事件就是操作检测与脚本执行的组合, 或者给予检测到的操作类型在某个对象上调用监听器. 术语     事件: onclick只是一个对象的属性,而不是一个事件,只是通过它可以为DOM...
  • SyKent
  • SyKent
  • 2012-08-16 22:57
  • 1992

JavaScript DOM学习笔记5——创建和操作节点

之前学习了DOM中各种节点的访问方法,DOM所包含的内容远不止如此,DOM编程还包括当DOM树已经构建起来之后再添加节点。         1.创建新节点         document对象中包...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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