jsday07补充(表格按年龄排序逆序间隔行切换颜色还有鼠标互动统一概念)

来源：互联网发布：软件成熟度模型下载编辑：程序博客网时间：2024/06/05 08:38

<script type="text/javascript" src="doctool.js"></script><script type="text/javascript">/*    表格中按照年龄的顺序进行排序    思路    1、每一个人的信息是一行        那么先将行都取出 临时存入到数组中     2、并对数组中的行对象的其中一个单元格中的数据进行排序    3、将排序后的行对象 重新添加到表格对象中*/var b = true;function sorttab(){    //1、获取表格中所有行对象    var tabNode=byTag("table")[0];    var trs = tabNode.rows;    //alert(trs.length);    //2、定义；临时容器 将表格中需要参入排序的行对象临时存储    var arr = new Array();//临时容器中存入的都是表格行对象的引用    for(var x= 1; x<trs.length;x++)    {        arr[x-1]= trs[x];    }    //alert(arr.length);    sortt(arr);    var tbdNode = tabNode.childNodes[1];    //alert(tbdNode.nodeName);    if(b){        for(var x= 0;x<arr.length;x++)        {            //alert(arr[x].cells[0].innerText+arr[x].cells[1].innerText);               tbdNode.appendChild(arr[x]);        }        b=false;    }    else    {        for(var x= arr.length-1;x>=0;x--)        {            //alert(arr[x].cells[0].innerText+arr[x].cells[1].innerText);               tbdNode.appendChild(arr[x]);        }        b=true;    }}function sortt(arr){    for (var x= 0;x<arr.length;x++)    {        for (var y= x+1;y<arr.length;y++)        {            if(parseInt(arr[x].cells[1].innerText)>parseInt(arr[y].cells[1].innerText))//用parseInt就按照大小来排不然就是按照字符串的字典顺序            {                var temp = arr[x];                arr[x]= arr[y];                arr[y]= temp;               }           }       }   }</script></head><body><table>    <tr>        <th>姓名</th>        <th><a href="javascript:void(0)" onclick="sorttab()">年龄</a></th>        <th>地址</th>    </tr>    <tr>        <td>张苏纳</td>        <td>11</td>        <td>天堂</td>    </tr>    <tr>        <td>小白</td>        <td>14</td>        <td>上号</td>    </tr>    <tr>        <td>如果</td>        <td>8</td>        <td>玩玩</td>    </tr>    <tr>        <td>是</td>        <td>18</td>        <td>大岸</td>    </tr></table></body>

<script type="text/javascript" src="doctool.js"></script><link rel="stylesheet" href="css-05.css" /><style type="text/css">.one{    background-color:#F00;}.two{    background-color:#9C6;}.over{    background-color:#FF0;}</style><script type="text/javascript">//行颜色间隔显示function tabcolor(){    var tabNode = byTag("table")[0];    var trs  = tabNode.rows;    //alert(trs.length);    for(var x= 1; x<trs.length;x++)    {        if(x%2==1)        {            trs[x].className ="one";            }           else             trs[x].className="two";        trs[x].onmouseover=function()        {            name =  this.className;            this.className="over";        };        trs[x].onmouseout=function()        {            this.className=name;        };    }       }var name ;/*function over(trNode){       name = trNode.className;    trNode.className="over";    }function out (trNode){    trNode.className=name;//注意不能加引号 引号认为你是新的样式选择器   }*/window.onload = tabcolor;</script></head><body><table>    <tr >        <th>姓名</th>        <th><a href="javascript:void(0)" onclick="">年龄</a></th>        <th>地址</th>    </tr>    <tr onmouseover="over(this)" onmouseout="out(this)">        <td>张苏纳</td>        <td>11</td>        <td>天堂</td>    </tr>    <tr>        <td>小白</td>        <td>14</td>        <td>上号</td>    </tr>    <tr>        <td>如果</td>        <td>8</td>        <td>玩玩</td>    </tr>    <tr>        <td>是</td>        <td>18</td>        <td>大岸</td>    </tr></table></body>

阅读全文

0 0

jsday07补充(表格按年龄 排序 逆序 间隔行切换颜色 还有鼠标互动 统一概念)

jsday07补充(表格按年龄排序逆序间隔行切换颜色还有鼠标互动统一概念)