DHTML技术演示---动态设置表格行间隔显示、表格排序、鼠标悬停样式改变

最新推荐文章于 2023-07-15 10:56:11 发布

海那边的小萌男

最新推荐文章于 2023-07-15 10:56:11 发布

阅读量511

点赞数

分类专栏： J2EE 文章标签： c语言鼠标技术 dhtml excel

本文链接：https://blog.csdn.net/weixin_37720904/article/details/71941341

版权

J2EE 专栏收录该内容

69 篇文章 0 订阅

订阅专栏

表格行间隔显示，如图
这里写图片描述

点击年龄会对表格排序，类似Excel ,再点一下就对表格就年龄倒序
这里写图片描述

主要用了一下几个方法

cells 获取表格行或整个表格中所有单元格的集合。

代码如下，有详细解释和步骤

<!DOCTYPE html>
<html>
  <head>
    <title>table2.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <style type="text/css">
        table {
            border: 1px solid #883d00;  
            width: 500px;
            border-collapse: collapse;
        }
        table th{
            border: #808040 1px solid;
            padding:5px;
            background-color: #00ffff;
        }
        table td{
            border: #004020 1px solid;
            padding: 5px;
        }
        .one{
            background-color: #0000bf;  
        }
        .two{
            background-color: #ff0080;  
        }
        .over{
            border: #004020 1px solid;
            padding: 5px;
            background-color: #a0a0c0;  
        }
    </style>
    <script type="text/javascript">
        //设置行之间不用样式显示
        function TrColor(){
            //rows 获取来自于 table 对象的 tr (表格行)对象的集合。
            // 拿到table 
            var otableNode = document.getElementById("table1");
            //遍历所以的行，单行样式设成.one 双行样式改成.two
            for(var i=1;i<otableNode.rows.length;i++){
                  var oTrNode = otableNode.rows[i];
                  if(i%2==1){
                      oTrNode.className="one";
                  }else{
                      oTrNode.className="two";
                  }

                  //设置鼠标经过时，改变样式。
                  var bgColor;
                  oTrNode.onmouseout=function(){
                        this.className=bgColor;
                  };
                  oTrNode.onmouseover=function(){
                        bgColor=this.className;
                        this.className="over";
                  };
            }
        }

    //  鼠标经过时改变改变样式的方法
        var bgColor;
        function SetMouse(oTrNode){
             //鼠标移出去
             if(oTrNode.className!="over"){
                bgColor=oTrNode.className;
                oTrNode.className="over";
             }else{//鼠标移进去
                oTrNode.className=bgColor;
             }
        }
        onload=TrColor;
    </script>
    <script type="text/javascript">
        //改变年龄把整个表格排序
        var isAsend = true;
        function sortTable(oAgeNode){
            //分析:在内存中排序比较合适，因此方案：
            //把行集合trRows备份到一个数组，对数组进行排序，
            //最后再把排序后的数组添加到表格

            //1.拿到表格的行集合
            var Rows = document.getElementById("table1").rows;
            //2.备份：（第一个年龄不要拿进来了）
            var sortRows = [];
            for(var i=1;i<Rows.length;i++){
                sortRows[i-1]=Rows[i];
            }
            //3.排序
            Sort(sortRows);
            //4.排完后 添加到表格
            if(isAsend){
                  for(var i=0;i<sortRows.length;i++){
                      //oTableNode.appendChild(trArr[i]);
                      sortRows[i].parentNode.appendChild(sortRows[i]);
                  }
                  oAgeNode.innerHTML="年龄↑";
              }else{
                  for(var i=sortRows.length-1;i>=0;i--){
                      sortRows[i].parentNode.appendChild(sortRows[i]);
                  }
                  oAgeNode.innerHTML="年龄↓";
              }
              //表格交换后，重新进行设置背景色
              TrColor();
              // 上次升序 ，下次就降序
              isAsend=!isAsend;
        }
        //cells  获取表格行或整个表格中所有单元格的集合。
        function Sort(arr){
              for(var i=0;i<arr.length-1;i++){
                  for(var j=i+1; j<arr.length; j++){
                      if( parseInt(arr[i].cells[1].innerText) > parseInt(arr[j].cells[1].innerText) ){
                          var temp = arr[i];
                          arr[i]=arr[j];
                          arr[j]=temp;
                      }
                  }
              }
          }
    </script>

  </head>

  <body>
        <table id="table1">
            <tr>
                <th>姓名</th>
                <th><a href="javascript:void(0)" onclick="sortTable(this)">年龄</a></th>
                <th>地址</th>
            </tr>
            <tr onmouseover="SetMouse(this)" onmouseout="SetMouse(this)">
                <td>杰少</td>
                <td>21</td>
                <td>无锡</td>
            </tr>
            <tr>
                <td>光军</td>
                <td>22</td>
                <td>湘乡</td>
            </tr>
            <tr>
                <td>谢哥</td>
                <td>32</td>
                <td>湘潭</td>
            </tr>
            <tr>
                <td>罗隽</td>
                <td>31</td>
                <td>长沙</td>
            </tr>
            <tr>
                <td>查哥</td>
                <td>30</td>
                <td>安徽</td>
            </tr>
            <tr>
                <td>王哥</td>
                <td>29</td>
                <td>安徽</td>
            </tr>
            <tr>
                <td>亚索</td>
                <td>28</td>
                <td>中路</td>
            </tr>
            <tr>
                <td>盖伦</td>
                <td>27</td>
                <td>上路</td>
            </tr>
            <tr>
                <td>寒冰</td>
                <td>26</td>
                <td>下路</td>
            </tr>
            <tr>
                <td>薇恩</td>
                <td>25</td>
                <td>下路</td>
            </tr>
        </table>
  </body>
</html>

下面是老师写的代码，更加细节
显示table.css

table {
    border: #8080ff solid 1px;
    width: 500px;
    border-collapse: collapse;
}

table th {
    border: #ff0000 solid 1px;
    padding: 5px;
    background-color: rgb(200, 200, 200);
}

table td {
    border: #ff0000 solid 1px;
    padding: 5px;
}

.one {
    background-color: #ff0000;
}

.two {
    background-color: #00ff00;
}

.over {
    background-color: #ffffff;
}

th a:link,th a:visited {
    color: #279bda;
    text-decoration: none;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>DHTML技术综合演示---示例:表格排序</title>
        <link rel="stylesheet" type="text/css" href="table.css">
        <style type="text/css">
           .one{
             background-color: #ff0000;
           }
           .two{
             background-color: #00ff00;
           }
           .over{
             background-color: #ffffff;
           }

           th a:link, th a:visited{
             color:#279bda;
             text-decoration: none;
           }

        </style>

        <script type="text/javascript">
          var bgColor;
          function trColor(){
              var oTableNode = document.getElementById("tab1");
              //遍历表格行
              for(var i=1;i<oTableNode.rows.length;i++){
                  var oTrNode = oTableNode.rows[i];
                  if(i%2==1){
                      oTrNode.className="one";
                  }else{
                      oTrNode.className="two";
                  }

                  //给当前行注册事件
                  oTrNode.onmouseover=function(){
                      bgColor=this.className;
                      this.className="over";
                  };
                  oTrNode.onmouseout=function(){
                      this.className=bgColor;
                  };
              }
          };
          onload=trColor;

          var isAsend = true;
          function sortTable(oANode){
              var oTableNode = document.getElementById("tab1");
              var trRows = oTableNode.rows;

              //分析:在内存中排序比较合适，因此方案：
              //把行集合trRows备份到一个数组，对数组进行排序，
              //最后再把排序后的数组添加到表格

              //备份
              var trArr=[];
              for(var i=1;i<trRows.length;i++){
                  trArr[i-1]=trRows[i];
              }

              //数组排序
              sortArr(trArr);

               //alert(oTableNode.nodeName);
              //把排序后的行数组添加回表格中 并  更改表头<th>中的文本
              if(isAsend){
                  for(var i=0;i<trArr.length;i++){
                      //oTableNode.appendChild(trArr[i]);
                      trArr[i].parentNode.appendChild(trArr[i]);
                  }
                  oANode.innerHTML="年龄↑";
              }else{
                  for(var i=trArr.length-1;i>=0;i--){
                      trArr[i].parentNode.appendChild(trArr[i]);
                  }
                  oANode.innerHTML="年龄↓";
              }

              isAsend=!isAsend;

              trColor();
          }

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


        </script>

    </head>

    <body>
        <table id="tab1">
          <tr>
            <th>姓名</th>
            <th><a href="javascript:void(0);" onclick="sortTable(this);">年龄</a></th>
            <th>地址</th>
          </tr>
          <tr>
            <td>张三</td>
            <td>20</td>
            <td>湖南</td>
          </tr>
          <tr>
            <td>李四</td>
            <td>22</td>
            <td>湖南</td>
          </tr>
          <tr>
            <td>Jack</td>
            <td>19</td>
            <td>北京</td>
          </tr>
          <tr>
            <td>Alice</td>
            <td>23</td>
            <td>New York</td>
          </tr>
          <tr>
            <td>赵子龙</td>
            <td>21</td>
            <td>常山</td>
          </tr>
          <tr>
            <td>刘备</td>
            <td>24</td>
            <td>上海</td>
          </tr>
          <tr>
            <td>张飞</td>
            <td>8</td>
            <td>上海</td>
          </tr>
          <tr>
            <td>关羽</td>
            <td>4</td>
            <td>上海</td>
          </tr>
        </table>


    </body>
</html>