网络编程

javascript实现对表格元素进行排序操作
网络编程 2025/10/30 佚名
3 2

我们在上网中都能看到很多能够排序的，如大小、时间、价格等
现在我们也试一下排序功能：
排序的函数代码：里面含有点击之后排序--还原，和排升序和降序。

 function sortAge(){ 
      //对年龄进行排序，要先进行获得每一行对象，然后对象对象中的第一个（从0 开始）的大小进行排序 
      var tabNode = document.getElementById("tabid"); 
      var rows0 = tabNode.rows; 
      var rows1 = []; 
      //现将元素拷贝一份出来， 第一行不用排序 
      for (var x = 1; x < rows0.length; x++) { 
        rows1[x - 1] = rows0[x]; 
      } 
      for (var x = 0; x < rows1.length - 1; x++) {//每个元素是行对象 
        for (var y = x + 1; y < rows1.length; y++) { 
          //对每一行的内容进行解析成数字 
          if (parseInt(rows1[x].cells[1].innerHTML) > parseInt(rows1[y].cells[1].innerHTML)) { 
            //alert("aa="+x+":"+rows1[x].cells[1].innerHTML); 
            //alert("bb"+rows1[y].cells[1].innerHTML); 
            var temp = rows1[x]; 
            rows1[x] = rows1[y]; 
            rows1[y] = temp; 
          } 
        } 
      } 
       
      /* 点击之后排序，排序之后恢复之前的状态 
 
if (flag){ 
       
      for (var x = 0; x < rows1.length; x++) { 
        //       tabNode.childNodes[0].appendChild(rows[x]);//方法一： 不一定兼容 
        rows1[x].parentNode.appendChild(rows1[x]); 
      } 
    }else{ 
       
      for (var x = 1; x < rows0.length; x++) { 
        //       tabNode.childNodes[0].appendChild(rows[x]);//方法一： 不一定兼容 
        rows0[x].parentNode.appendChild(rows0[x]); 
      } 
    } 
    flag=!flag;*/ 
    /* 下面的是点之后出现正序和逆序显示 正序和逆序的区别就是appendchild的前后关系而已*/ 
    var ageimg=document.getElementById("ageid"); 
     
    if (flag) { 
      for (var x = 0; x < rows1.length; x++) {//排好序之后就从0开始 
        //       tabNode.childNodes[0].appendChild(rows[x]);//方法一： 不一定兼容 
        rows1[x].parentNode.appendChild(rows1[x]); 
      } 
      ageimg.innerHTML="年龄▲";//设置上面的图标 
       
    }else{ 
      for (var x = rows1.length-1; x >=0; x--) { 
        //       tabNode.childNodes[0].appendChild(rows[x]);//方法一： 不一定兼容 
        rows1[x].parentNode.appendChild(rows1[x]); 
      } 
      ageimg.innerHTML="年龄▼" 
    } 
    flag=!flag; 
      loading();//排序之后还要对颜色重新设置 
         
    }

设置表格的背景颜色代码，导入的css：

function loading(){ 
        var name; 
        var tabNode=document.getElementById("tabid"); 
        var rows=tabNode.rows;//获得每一行的数组对象 
        var rowslength=rows.length;//每一行的长度 
        for(var x=1;x<rowslength;x++){//根据每一个去设置 
          if(x%2==0){ 
            rows[x].className="one"; 
          }else{ 
            rows[x].className="two"; 
          } 
          //当移动上去之后，之前的颜色要记录下来，不然移下来之后全部都是一个颜色了 
          rows[x].onmouseover=function(){ 
            name=this.className; 
            this.className="three"; 
          } 
          rows[x].onmouseout=function(){ 
            this.className=name; 
          } 
        } 
         
      } 
      onload=function(){ 
        loading(); 
      }

css代码：

table td a:hover{ 
      background-color:#0080c0; 
    } 
  .one{ 
    background-color:#80ff00; 
  } 
  .two{ 
    background-color:#ff8040; 
  } 
  .three{ 
    background-color:#008040; 
  } 
  table{ 
    width:500px; 
    height:500px; 
    border:#400040 solid 2px; 
    border-collapse:collapse; 
  } 
  table td,th{ 
    border:solid 2px; 
  } 
  table th{ 
    background-color:#c0c0c0; 
  }

效果图-----排序之前：

javascript实现对表格元素进行排序操作

升序：

javascript实现对表格元素进行排序操作

降序：

javascript实现对表格元素进行排序操作

完整代码：

<!DOCTYPE html> 
<html> 
 <head> 
  <title>sort.html</title> 
  <style type="text/css"> 
    table td a:hover{ 
      background-color:#0080c0; 
    } 
    .one{ 
      background-color:#80ff00; 
    } 
    .two{ 
      background-color:#ff8040; 
    } 
    .three{ 
      background-color:#008040; 
    } 
    table{ 
      width:500px; 
      height:500px; 
      border:#400040 solid 2px; 
      border-collapse:collapse; 
    } 
    table td,th{ 
      border:solid 2px; 
    } 
    table th{ 
      background-color:#c0c0c0; 
    } 
   
  </style> 
  <script type="text/javascript"> 
     
      function loading(){ 
        var name; 
        var tabNode=document.getElementById("tabid"); 
        var rows=tabNode.rows;//获得每一行的数组对象 
        var rowslength=rows.length;//每一行的长度 
        for(var x=1;x<rowslength;x++){//根据每一个去设置 
          if(x%2==0){ 
            rows[x].className="one"; 
          }else{ 
            rows[x].className="two"; 
          } 
          //当移动上去之后，之前的颜色要记录下来，不然移下来之后全部都是一个颜色了 
          rows[x].onmouseover=function(){ 
            name=this.className; 
            this.className="three"; 
          } 
          rows[x].onmouseout=function(){ 
            this.className=name; 
          } 
        } 
         
      } 
      onload=function(){ 
        loading(); 
      } 
    var flag=true; 
    function sortAge(){ 
      //对年龄进行排序，要先进行获得每一行对象，然后对象对象中的第一个（从0 开始）的大小进行排序 
      var tabNode = document.getElementById("tabid"); 
      var rows0 = tabNode.rows; 
      var rows1 = []; 
      //现将元素拷贝一份出来， 第一行不用排序 
      for (var x = 1; x < rows0.length; x++) { 
        rows1[x - 1] = rows0[x]; 
      } 
      for (var x = 0; x < rows1.length - 1; x++) {//每个元素是行对象 
        for (var y = x + 1; y < rows1.length; y++) { 
          //对每一行的内容进行解析成数字 
          if (parseInt(rows1[x].cells[1].innerHTML) > parseInt(rows1[y].cells[1].innerHTML)) { 
            //alert("aa="+x+":"+rows1[x].cells[1].innerHTML); 
            //alert("bb"+rows1[y].cells[1].innerHTML); 
            var temp = rows1[x]; 
            rows1[x] = rows1[y]; 
            rows1[y] = temp; 
          } 
        } 
      } 
       
      /* 点击之后排序，排序之后恢复之前的状态 
 
if (flag){ 
       
      for (var x = 0; x < rows1.length; x++) { 
        //       tabNode.childNodes[0].appendChild(rows[x]);//方法一： 不一定兼容 
        rows1[x].parentNode.appendChild(rows1[x]); 
      } 
    }else{ 
       
      for (var x = 1; x < rows0.length; x++) { 
        //       tabNode.childNodes[0].appendChild(rows[x]);//方法一： 不一定兼容 
        rows0[x].parentNode.appendChild(rows0[x]); 
      } 
    } 
    flag=!flag;*/ 
    /* 下面的是点之后出现正序和逆序显示 正序和逆序的区别就是appendchild的前后关系而已*/ 
    var ageimg=document.getElementById("ageid"); 
     
    if (flag) { 
      for (var x = 0; x < rows1.length; x++) {//排好序之后就从0开始 
        //       tabNode.childNodes[0].appendChild(rows[x]);//方法一： 不一定兼容 
        rows1[x].parentNode.appendChild(rows1[x]); 
      } 
      ageimg.innerHTML="年龄▲";//设置上面的图标 
       
    }else{ 
      for (var x = rows1.length-1; x >=0; x--) { 
        //       tabNode.childNodes[0].appendChild(rows[x]);//方法一： 不一定兼容 
        rows1[x].parentNode.appendChild(rows1[x]); 
      } 
      ageimg.innerHTML="年龄▼" 
    } 
    flag=!flag; 
      loading();//排序之后还要对颜色重新设置 
         
    } 
  </script> 
 
 </head> 
  
 <body> 
  <table id="tabid"> 
    <tr><th>姓名</th> 
      <th><a href="javascript:void(0)" onclick="sortAge()" id="ageid">年龄</a></th> 
      <th>出生地</th> 
    </tr> 
    <tr> 
      <td>张三</td> 
      <td>13</td> 
      <td>湖南长沙</td> 
    </tr> 
    <tr> 
      <td>李四</td> 
      <td>15</td> 
      <td>湖南常德</td> 
    </tr> 
    <tr> 
      <td>jack</td> 
      <td>45</td> 
      <td>湖南临澧</td> 
    </tr> 
    <tr> 
      <td>王华</td> 
      <td>23</td> 
      <td>浙江杭州</td> 
    </tr> 
    <tr> 
      <td>张进</td> 
      <td>30</td> 
      <td>安微合肥</td> 
    </tr> 
    <tr> 
      <td>周全</td> 
      <td>23</td> 
      <td>湖南益阳</td> 
    </tr> 
    <tr> 
      <td>杨哥</td> 
      <td>42</td> 
      <td>湖南常德</td> 
    </tr> 
   
  </table> 
 </body> 
</html>

以上就是本文的全部内容，很详细，教大家如何对表格中的元素进行排序操作，感谢大家阅读这篇javascript实现对表格元素进行排序操作的文章，希望大家喜欢。

标签：
javascript表格排序,javascript排序,javascript表格
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
白云城资源网 Copyright www.dyhadc.com

评论“javascript实现对表格元素进行排序操作”

暂无“javascript实现对表格元素进行排序操作”评论...
www.dyhadc.com 白云城资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接
白云城资源网 Copyright www.dyhadc.com