javascript实现表格中，行的排序和汇总

最新推荐文章于 2024-09-24 10:01:00 发布

woai_432

最新推荐文章于 2024-09-24 10:01:00 发布

阅读量537

点赞数

文章标签： javascript function table string html

本文链接：https://blog.csdn.net/woai_432/article/details/2113141

版权

项目业务上的需要，显示数据条目的过程中，要进行数据的汇总。根据这个要求，用了几个javascript行数。在网页加载后，调用，实现了数据的求和和排序

<html>
<head>
  <script>
  function compare_string(str1,str2){
   return str1.localeCompare(str2);
  }

  function compare_num(num1,num2){
   var int1 = parseInt(num1);
   var int2 = parseInt(num2);
   if(int1 > int2){
    return 1;
   }else if(int1 < int2){
    return -1;
   }else{
    return 0;
   }
  }
  function compare_rows(oTr1,oTr2){
   var rowData1 = oTr1.cells[0].firstChild.nodeValue;
   var rowData2 = oTr2.cells[0].firstChild.nodeValue;
   return rowData1.localeCompare(rowData2);
  }
  function compareRow(col){
   return function compare_rows(oTr1,oTr2){
    var rowData1 = oTr1.cells[col].firstChild.nodeValue;
    var rowData2 = oTr2.cells[col].firstChild.nodeValue;
    return rowData1.localeCompare(rowData2);
   };

  }
  function table_sum(j){
   var oTable = document.getElementById("tid1");

   var oTbody = oTable.tBodies[0];
   var colDataRows = oTbody.rows;
   var v=0;
   for(var i=1; i<colDataRows.length; i++){
    v += parseInt(colDataRows[i].cells[j].firstChild.nodeValue);
   }
   colDataRows[0].cells[j].firstChild.nodeValue=v;
  }

  function sort_table(stid,sortid,col){
   var oTable = document.getElementById("tid1");

   var oTbody = oTable.tBodies[0];
   var colDataRows = oTbody.rows;
   var atrrs = new Array;
   var fcompareRow = compareRow(col);
   for(var i=0; i<colDataRows.length; i++){
    atrrs.push(colDataRows[i]);
   }
   if(oTable.sortId == sortid){
    atrrs.reverse();
   }else{
    atrrs.sort(fcompareRow);
   }
   var oFragment = document.createDocumentFragment();
   for(var i=0; i<atrrs.length; i++){
    oFragment.appendChild(atrrs[i]);
   }
   oTbody.appendChild(oFragment);
   oTable.sortId = sortid;
  }
  </script>
</head>
<body οnlοad="table_sum(1);">
<table id="tid1">
  <thead>
   <tr>
    <th style="cursor:pointer">名称</th>
    <th style="cursor:pointer">人数1</th>
    <th style="cursor:pointer">人数2</th>
    <th style="cursor:pointer">人数3</th>
   </tr>
  </thead>
   <tr>
    <td>总数</td>
    <td> </td>
    <td> </td>
    <td> </td>
   </tr>
   <tr>
    <td>A</td>
    <td>10</td>
    <td>26</td>
    <td>8</td>
   </tr>
   <tr>
    <td>B</td>
    <td>15</td>
    <td>28</td>
    <td>9</td>
   </tr>

   <tr>
    <td>C</td>
    <td>5</td>
    <td>22</td>
    <td>20</td>
   </tr>

   <tr>
    <td>D</td>
    <td>0</td>
    <td>22</td>
    <td>10</td>
   </tr>

  <tbody>

  </tbody>
</table>
</body>
</html>