JavaScript暑期学习(三)

这两天根据网易云智能社JS教程学习了一些简单的表格操作,此处做个总结。

包含效果图片、代码及实现原理。

表格的组成(顺便复习一下html、CSS)

<table id="tab1" border="1" width="300" title="登记表">
        <thead>
            <td>ID</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>操作</td>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>阿洁</td>
                <td>7</td>
                <td><a href="javascript:">删除</a></td>
            </tr>
            <tr>
                <td>2</td>
                <td>阿平</td>
                <td>16</td>
                <td><a href="javascript:">删除</a></td>
            </tr>
            <tr>
                <td>3</td>
                <td>阿赐</td>
                <td>17</td>
                <td><a href="javascript:">删除</a></td>
            </tr>
            <tr>
                <td>4</td>
                <td>璐璐</td>
                <td>18</td>
                <td><a href="javascript:">删除</a></td>
            </tr>
            <tr>
                <td>5</td>
                <td>王开心</td>
                <td>18</td><td><a href="javascript:">删除</a></td>
            </tr>
            <tr>
                <td>6</td>
                <td>王曦</td>
                <td>18</td><td><a href="javascript:">删除</a></td>
            </tr>
        </tbody>
    </table>

tbody的使用会给一些操作带来便利,能够选择跳过表头。

按行变色,鼠标移入移出颜色变化

鼠标移开后会恢复原色
 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='lightpink';
     }
     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='lightblue';
     }
}

表格中tbodes、rows、cells数组的应用会给表格操作的控制带来便利。变色的原理就是利用这些数组获取鼠标悬停的行号记住原色后进行变色,鼠标移出后背景又设为原色。

表格中的添加和删除操作

在文本框输入对应操作后,点击添加按钮,就可以增加行,点击删除链接,就可以实现删除行。
姓名<input id="name" type="text" />
年龄<input id="age" type="text" />
<input id="btn1" type="button" value="添加">
var oTab=document.getElementById('tab1');
var oldColor='';
var oBtn=document.getElementById('btn1');
var oTxt=document.getElementById('txt');
var oName=document.getElementById('name');
var oAge=document.getElementById('age');
//添加、删除操作
oBtn.onclick=function ()
{
     var oTr=document.createElement('tr');

     var oTd=document.createElement('td');
     oTd.innerHTML=oTab.tBodies[0].rows.length+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);

     var oTd=document.createElement('td');
     oTd.innerHTML='<a href="javascript:">删除</a>';
     oTr.appendChild(oTd);

     oTab.tBodies[0].appendChild(oTr);

     oTd.getElementsByTagName('a')[0].onclick=function ()
     {
           oTab.tBodies[0].removeChild(this.parentNode.parentNode);
     }
}

createElement、appendChild、removeChild、parentNode的应用:点击添加按钮后,获取文本框中的内容,利用createElement创建行,添加到tbody中,完成添加行操作,通过a标签的点击效果,利用removeChild删除a标签的父节点的父节点即操作行。

表格的搜索功能

可进行忽略大小写并多关键字的搜索,搜索结果高亮显示。
<input id="txt" type="text" />
<input id="btn1" type="button" value="搜索">
//搜索功能
oBtn.onclick=function ()
{
     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='lightyellow';
               }
          }
     }
}

通过toLowerCase函数实现模糊搜索,通过split函数利用空格将搜索字符串分割成数组,在循环中再次使用for循环,利用search函数查找所有分割出来的数组成员即关键字(查找失败返回-1)实现关键字搜索。

表格排序(简单的根据ID排序)

//排序
oBtn.onclick=function ()
{
     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]);
     }
}

首先要明确rows不是数组是元素集合,我们先将它放入一个数组,再利用数组的sort函数根据id进行排序,最后我们利用排好序的数组使用appendChild完成元素的变化,进行排序。

appendChild是在原来的父级下删除元素,再在选定的父级元素下进行添加,之前因为添加的元素原本就没有父级元素所以没有说明。

博客结束~谢谢收看。

加油加油加油~~~~

发表评论

电子邮件地址不会被公开。 必填项已用*标注