对javascript表格中的元素进行排序(正序和倒序)

最新推荐文章于 2023-05-15 19:34:40 发布

站在巨人的肩膀上奋斗

最新推荐文章于 2023-05-15 19:34:40 发布

阅读量2.7k

点赞数

分类专栏： Java 文章标签： javascript function html border table

本文链接：https://blog.csdn.net/daijunjian/article/details/7371042

版权

Java 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<!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=GB18030">
        <title>Insert title here</title>

  
  <style type="text/css">
   a{text-decoration:none;}

  </style>
  <script type="text/javascript">
   /*
    * 对javascript表格中的元素进行排序(正序和倒序)
    * 知识点:其中使用了冒泡排序
    *         数组中的两个数据的交换
    */
   var nameTimes = 0; //为了让各自的元素排序,互不影响,为每个排序,添加一个统计次数
   var ageTimes = 0;
   var emailTimes = 0;
   function sortByName(){
    //获取tbody中所有的tr,然后按名字排序,内部是按码表值排序
    var trArr = document.getElementsByTagName("tbody")[0].rows; //获取TBODY中的所有TR
    for(var i = 0; i < trArr.length - 1; i++)
     for(var j = 0; j < trArr.length - 1 - i; j++)
      if(nameTimes % 2 == 0 ?
       (trArr[j].cells[0].innerHTML) > (trArr[j+1].cells[0].innerHTML)
        : (trArr[j].cells[0].innerHTML) < (trArr[j+1].cells[0].innerHTML))
       trArr[j].swapNode(trArr[j + 1]);
    nameTimes++;
   }
   function sortByAge(){
    //获取tbody中所有的tr,然后按年龄排序
    var trArr = document.getElementsByTagName("tbody")[0].rows;
    for(var i = 0; i < trArr.length - 1; i++)
     for(var j = 0; j < trArr.length - 1 - i; j++)
      if(ageTimes % 2 == 0 ?
       parseInt(trArr[j].cells[1].innerHTML) > parseInt(trArr[j+1].cells[1].innerHTML)
        : parseInt(trArr[j].cells[1].innerHTML) < parseInt(trArr[j+1].cells[1].innerHTML))
       trArr[j].swapNode(trArr[j + 1]);
    ageTimes++;
   }
   function sortByEmail(){
    //获取tbody中所有的tr,然后按邮箱排序,字母排序
    var trArr = document.getElementsByTagName("tbody")[0].rows;
    for(var i = 0; i < trArr.length - 1; i++)
     for(var j = 0; j < trArr.length - 1 - i; j++)
      if(emailTimes % 2 == 0 ?
       (trArr[j].cells[2].innerHTML) > (trArr[j+1].cells[2].innerHTML)
        : (trArr[j].cells[2].innerHTML) < (trArr[j+1].cells[2].innerHTML))
       trArr[j].swapNode(trArr[j + 1]);
    emailTimes++;
   }
  </script>
    </head>
    <body>
    <table width=60% border=1px cellspacing=0px cellpadding=5px align=center>
    <thead>
      <tr>
       <th><a href="javascript:sortByName()">姓名</a></th>
       <th><a href="javascript:sortByAge()">年龄</a></th>
       <th><a href="javascript:sortByEmail()">邮箱</a></th>
      </tr>
   </thead>
   <tbody>
   <tr>
       <td>郑立杰</td>
       <td>27</td>
       <td>zlj@gmail.com</td>
      </tr>
   <tr>
       <td>赵峥</td>
       <td>18</td>
       <td>zj@163.com</td>
      </tr>
   <tr>
       <td>吕佩</td>
       <td>18</td>
       <td>lp@sina.com.cn</td>
      </tr>
   <tr>
       <td>张纪强</td>
       <td>8</td>
       <td>zjq@qq.com</td>
      </tr>
   <tr>
       <td>杜超</td>
       <td>22</td>
       <td>dc@hotmail.com</td>
      </tr>
   </tbody>
    </table>
    </body>
</html>

站在巨人的肩膀上奋斗

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
对javascript表格中的元素进行排序(正序和倒序)

http://www.w3.org/TR/html4/loose.dtd"> Insert title here a{text-decoration:none;} /* *对javascript表格中的元素进行排序(正序和倒序) * 知识点:其中使用
复制链接

扫一扫