JavaScript---网络编程(9-2)--DHTML技术演示(2-2)-表格加强

时间：2016-06-21 01:19:12 阅读：328 评论：0 收藏：0 [点我收藏+]

标签：

对上篇博客的最后那个表格隔行高亮显示加了个功能，鼠标监听和年龄从小到大排序。

演示代码：

<html>
  <head>
    <title>DHTML技术演示---表格中页面中的显示操纵--行间隔高亮显示</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
        @import url(table.css);
        .one{
            background:#00ff00;
        }
        .two{
            background:rgb(210,0,0);
        }
        .over{
            background-color:#ffff00;
        }   
    </style>
    <script type="text/javascript">
        function trColor(){
            var oTableNode = document.getElementById("dataTable");
            var arrTrs = oTableNode.rows;//rows为表格属性，返回所以的行
            for(var x=1;x<arrTrs.length; x++){
                if(x%2==1){
                    arrTrs[x].className="one";
                }else{
                    arrTrs[x].className="two";
                }
                //为每一行动态注册事件处理方法
                var oldClassName;
                arrTrs[x].onmouseover=function(){
                    //监听鼠标-移动到那一行
                    oldClassName=this.className;
                    this.className="over";
                };
                arrTrs[x].onmouseout=function(){
                    //鼠标监听-移开
                    this.className=oldClassName;
                };

            }

        }
        //onload = trColor();//这种方式赋值就是执行(本例中，这一句没有效果，因为table对象还没出来。
        //但如果把该段代码放在<table>之后则有效果)，而且只能执行这一个方法

        onload=function(){
            trColor();
            //还可以在这里写其它代码，甚至调用其它函数
        };
        //这种方式只是给onload事件注册响应函数，解析该句代码时函数并没有执行
        //而是在该事件发生时才会调用。并且可以在function()中调用多个函数.

    </script>


    <script type="text/javascript">
        function sortTable(){
            var oTableNode = document.getElementById("dataTable");
            var arrTrs = oTableNode.rows;
            //思路：用一个新的容器来存放表格的行对象数组，并在新数组中进行排序,把排序后的每个元素(行对象)依次添加到表格对象中

            //放到新容器arrTrs2中
            var arrTrs2 = [];
            for (var x = 1; x < arrTrs.length; x++) {
                arrTrs2[x - 1] = arrTrs[x];
            }
            //arrTrs2数组可以看成arrTrs数组的引用

            //对容器arrTrs2中的元素进行排序    
            mySort(arrTrs2);

            //把排序后的行对象重新加到表格中
            for (var x = 0; x < arrTrs2.length; x++) {
                //arrTrs2[x].parentNode.nodeName//TBODY
                arrTrs2[x].parentNode.appendChild(arrTrs2[x]);
                //arrTrs2数组可以看成arrTrs数组的引用
            }

        }

        function mySort(arr){
            for(var x=0;x<arr.length-1;x++){
                for(var y=x+1;y<arr.length;y++){
                    if(parseInt(arr[x].cells[1].innerText) > parseInt(arr[y].cells[1].innerText)){
                        var temp = arr[x];
                        arr[x] = arr[y];
                        arr[y] = temp;
                    }
                }
            }
        }

    </script>


  </head>

  <body>
        <table id="dataTable">
            <tr>
                <th>姓名</th> <th><a href="javascript:void(0)" onclick="sortTable()">年龄</a></th> <th>地址</th>
            </tr>

            <tr>
                <td>张三</td> <td>23</td> <td>湖南长沙</td>
            </tr>
            <tr>
            <td>李四</td> <td>24</td> <td>湖南长沙</td>
            </tr>
            <tr>
                <td>王五</td> <td>53</td> <td>湖南长沙</td>
            </tr>
            <tr>
                <td>Jack</td> <td>65</td> <td>湖南长沙</td>
            </tr>
            <tr>
                <td>Rose</td> <td>13</td> <td>湖南长沙</td>
            </tr>
            <tr>
                <td>Jack</td> <td>8</td> <td>湖南长沙</td>
            </tr>
            <tr>
                <td>Rose</td> <td>73</td> <td>湖南长沙</td>
            </tr>
            <tr>
                <td>Jack</td> <td>29</td> <td>湖南长沙</td>
            </tr>
            <tr>
                <td>Rose</td> <td>20</td> <td>湖南长沙</td>
            </tr>
        </table>

  </body>
</html>

table.css:

table {
    border:#ff80ff 1px solid;
    /*solid  :　 实线边框 */
    width:800px;
    border-collapse:collapse;
    /*separate  :　 默认值。边框独立（标准HTML） 
    collapse  :　 相邻边被合并 
    */  
}
table td{/*table 下面的td*/
    border:#0000ff 1px solid;
    padding:5px;/*内补丁*/
}
table th{
    border:#ff80ff 1px solid;
    padding:5px;
    background-color:#c0c0c0;
}

演示结果：
鼠标监听：
技术分享

点一下年龄：实现表格按年龄从小到大排序
技术分享

现在我们觉得上面的不好，只能从小到大排序，而且排序后颜色也变了。不好看，现在我们来对它进行改进。

代码演示：

<html>
  <head>
    <title>DHTML技术演示---表格中页面中的显示操纵--行间隔高亮显示</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
        @import url(table.css);
        .one{
            background:#00ff00;
        }
        .two{
            background:rgb(210,0,0);
        }
        .over{
            background-color:#ffff00;
        }   
        a{
            text-decoration:none;/*装饰-去掉下划线*/
        }
    </style>
    <script type="text/javascript">
        function trColor(){
            var oTableNode = document.getElementById("dataTable");
            var arrTrs = oTableNode.rows;//rows为表格属性，返回所以的行
            for(var x=1;x<arrTrs.length; x++){
                if(x%2==1){
                    arrTrs[x].className="one";
                }else{
                    arrTrs[x].className="two";
                }
                //为每一行动态注册事件处理方法
                var oldClassName;
                arrTrs[x].onmouseover=function(){
                    //监听鼠标-移动到那一行
                    oldClassName=this.className;
                    this.className="over";
                };
                arrTrs[x].onmouseout=function(){
                    //鼠标监听-移开
                    this.className=oldClassName;
                };

            }

        }
        //onload = trColor();//这种方式赋值就是执行(本例中，这一句没有效果，因为table对象还没出来。
        //但如果把该段代码放在<table>之后则有效果)，而且只能执行这一个方法

        onload=function(){
            trColor();
            //还可以在这里写其它代码，甚至调用其它函数
        };
        //这种方式只是给onload事件注册响应函数，解析该句代码时函数并没有执行
        //而是在该事件发生时才会调用。并且可以在function()中调用多个函数.

    </script>


    <script type="text/javascript">
        var flag=true;
        function sortTable(aNode){
            var oTableNode = document.getElementById("dataTable");
            var arrTrs = oTableNode.rows;
            //思路：用一个新的容器来存放表格的行对象数组，并在新数组中进行排序,把排序后的每个元素(行对象)依次添加到表格对象中

            //放到新容器arrTrs2中
            var arrTrs2 = [];
            for (var x = 1; x < arrTrs.length; x++) {
                arrTrs2[x - 1] = arrTrs[x];
            }
            //arrTrs2数组可以看成arrTrs数组的引用

            //对容器arrTrs2中的元素进行排序    
            mySort(arrTrs2);

            //把排序后的行对象重新加到表格中
            if(flag){
                for (var x = 0; x < arrTrs2.length; x++) {
                    //arrTrs2[x].parentNode.nodeName//TBODY
                    arrTrs2[x].parentNode.appendChild(arrTrs2[x]);
                    //arrTrs2数组可以看成arrTrs数组的引用
                }
                aNode.innerHTML="年龄↑";
            }else{
                for(var x=arrTrs2.length-1;x>=0;x--){
                    arrTrs2[x].parentNode.appendChild(arrTrs2[x]);
                }
                aNode.innerHTML="年龄↓";
            }
            flag = !flag;
            trColor();
        }

        function mySort(arr){
            for(var x=0;x<arr.length-1;x++){
                for(var y=x+1;y<arr.length;y++){
                    if(parseInt(arr[x].cells[1].innerText) > parseInt(arr[y].cells[1].innerText)){
                        var temp = arr[x];
                        arr[x] = arr[y];
                        arr[y] = temp;
                    }
                }
            }
        }

    </script>


  </head>

  <body>
        <table id="dataTable">
            <tr>
                <th>姓名</th> <th><a href="javascript:void(0)" onclick="sortTable(this)">年龄</a></th> <th>地址</th>
            </tr>

            <tr>
                <td>张三</td> <td>23</td> <td>湖南长沙</td>
            </tr>
            <tr>
            <td>李四</td> <td>24</td> <td>湖南长沙</td>
            </tr>
            <tr>
                <td>王五</td> <td>53</td> <td>湖南长沙</td>
            </tr>
            <tr>
                <td>Jack</td> <td>65</td> <td>湖南长沙</td>
            </tr>
            <tr>
                <td>Rose</td> <td>13</td> <td>湖南长沙</td>
            </tr>
            <tr>
                <td>Jack</td> <td>8</td> <td>湖南长沙</td>
            </tr>
            <tr>
                <td>Rose</td> <td>73</td> <td>湖南长沙</td>
            </tr>
            <tr>
                <td>Jack</td> <td>29</td> <td>湖南长沙</td>
            </tr>
            <tr>
                <td>Rose</td> <td>20</td> <td>湖南长沙</td>
            </tr>
        </table>

  </body>
</html>

演示结果：

技术分享

JavaScript---网络编程(9-2)--DHTML技术演示(2-2)-表格加强

标签：

原文地址：http://blog.csdn.net/qq_26525215/article/details/51721353

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行