2 s364136299 s364136299 于 2015.07.02 18:10 提问

js排序问题! 如何过滤不需要的tr 35C
js

可以直接用的!传上来方便下像我一样的人!

  <script type="text/javascript">
 function convert(sValue, sDataType) {           //(值,类型(int ,date ,float,String))
        switch (sDataType) {   //选择类型
            case "int":
                return parseInt(sValue);   //返回int型
            case "float":
                return parseFloat(sValue);   //返回float型
            case "date":
                return new Date(Date.parse(sValue));  //返回date型(日期)
            default:
                return sValue.toString();   //转换为字符串

        }
    }

    //排序函数产生器,iCol表示列索引,sDataType表示该列的数据类型
    function generateCompareTRs(iCol, sDataType) {    //类型索引,类型

        return function compareTRs(oTR1, oTR2) {

            var vValue1 = convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType);
            var vValue2 = convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);

            if (vValue1 > vValue2) {
                return -1;
            } else if (vValue1 < vValue2) {
                return 1;
            } else {
                return 0;
            }
        };
    }

    //排序方法
    function sortTable(sTableID, iCol, sDataType) {
        var oTable = document.getElementById(sTableID);

        if (oTable.rows.length < 2) {
            return false;
        }
        var oTBody = oTable.tBodies[0];

        var colDataRows = oTBody.getElementsByTagName('tr');

        var aTRs = new Array;

        //将所有列放入数组
        for (var i = 0; i < colDataRows.length; i++) {
            if (colDataRows[i].getAttribute('display') != null) aTRs[aTRs.length] = colDataRows[i]; //要排序的显示列
        }

        //判断最后一次排序的列是否与现在要进行排序的列相同,是的话,直接使用reverse()逆序
        if (oTable.sortCol == iCol) {
            aTRs.reverse();
        } else {

            //使用数组的sort方法,传进排序函数
            aTRs.sort(generateCompareTRs(iCol, sDataType));
        }

        var oFragment = document.createDocumentFragment();
        for (var i = 0; i < aTRs.length; i++) {
            oFragment.appendChild(aTRs[i]);
        }

        oTBody.appendChild(oFragment);
        //记录最后一次排序的列索引
        oTable.sortCol = iCol;
        //对详细列进行重新插入操作
        var trDetail;
        for (var i = 0; i < aTRs.length; i++) {

            trDetail = document.getElementById(aTRs[i].getAttribute('display'));
            console.log(trDetail);//获取详细的数据行
            oTBody.insertBefore(trDetail, aTRs[i]);//第一次插入,详细行被插入到排列好的指示行前面,所以还得执行一次下面的操作
            oTBody.insertBefore(aTRs[i], trDetail);
        }
    }

        </script>


        <table id="tbl">
               <tr>
                                        <th width="5%"  onClick="sortTable('tbl',0,'int')">日期</th>
                                        <th width="13%">广告</th>             
                                        <th width="7%"  onClick="sortTable('tbl',2,'int')">PUSH</th>
                                        <th width="7%"  onClick="sortTable('tbl',3,'int')">点击数</th>
                                    <th width="7%"  onClick="sortTable('tbl',4,'int')">下载成功数</th>
                                    <th width="7%"  onClick="sortTable('tbl',5,'int')">下载失败数</th>
                        </tr>   


                        <tbody>

                                            <s:iterator value="#reportMapList" status="st">

                                                <tr <s:if test="#st.odd">class="info"</s:if><s:else>class="warning"</s:else> display="operations_reportAd_reportAdList_table_tr_<s:property value='adid' />_<s:property value='sdate' />">
                                                    <td style="text-align: center;"><s:property value='sdate' /></td>
                                                    <td  style="text-align: center;font-size:12px;" >
                                                    <a onclick="showDetail(<s:property value='adid' />,<s:property value='sdate' />)" style="cursor: pointer;" ><s:property value='adname' /></a>
                                                    </td>
                                                    <td style="text-align: center;"><s:property value='pushu' /></td>
                                                    <td style="text-align: center;"><s:property value='djsu' /></td>
                                                    <td style="text-align: center;"><s:property value='xzcgu' /></td>
                                                    <td style="text-align: center;"><s:property value='xzsbu' /></td>
                                                    <td style="text-align: center;"><s:property value='azsu' /></td>
                                                    <td style="text-align: center;"><s:property value='md5u' /></td>
                                                    <td style="text-align: center;"><s:property value='xzsu' /></td>
                                                    <td style="text-align: center;"><s:property value='llqdku' /></td>
                                                    <td style="text-align: center;"><s:property value='zjdku' /></td>
                                                    <td style="text-align: center;"><s:property value='bmbppu' /></td>
                                                    <td style="text-align: center;"><s:property value='yhqxu' /></td>

                                                </tr>
                                                <tr id="operations_reportAd_reportAdList_table_tr_<s:property value='adid' />_<s:property value='sdate' />" style="display: none;">
                                                <td  colspan="13" >
                                                    <input type="hidden" value="0" id="operations_reportAd_reportAdList_table_tr_<s:property value='adid' />_<s:property value='sdate' />_hidden">
                                                    <div class="container" style="width:95%;padding-top:20px;padding-bottom:25px;">
                                                    <table  class="table table-bordered table-condensed table-hover" style="font-size:12px;">
                                                      <thead>
                                                        <tr>
                                                          <th>日期</th>
                                                          <th>广告词标题</th>
                                                          <th>广告形式</th>
                                                          <th>PUSH</th>
                                                          <th>点击数</th>
                                                          <th>下载成功数</th>
                                                          <th>下载失败数</th>
                                                          <th>安装数</th>
                                                          <th>MD5错误数</th>
                                                          <th>卸载数</th>
                                                          <th>浏览器打开</th>
                                                          <th>直接打开</th>
                                                          <th>包名错误数</th>
                                                          <th>用户取消数</th>

                                                        </tr>
                                                      </thead>
                                                      <tbody id="operations_reportAd_reportAdList_table_tr_<s:property value='adid' />_<s:property value='sdate' />_table_tbody">

                                                      </tbody>
                                                    </table>
                                                    </div>
                                                </td>
                                                </tr>
                                            </s:iterator>
                                        </tbody>



        </table>

4个回答

showbo
showbo   Ds   Rxr 2015.07.02 20:36

主要显示的数据行添加特殊属性,然后收集这些数据行进行排序操作~

danielinbiti
danielinbiti   Ds   Rxr 2015.07.02 23:15
 <!DOCTYPE html> 
<html>
<head> 
</head> 
<script>
    function convert(sValue, sDataType) {           //(值,类型(int ,date ,float,String))
        switch (sDataType) {   //选择类型
            case "int":
                return parseInt(sValue);   //返回int型
            case "float":
                return parseFloat(sValue);   //返回float型
            case "date":
                return new Date(Date.parse(sValue));  //返回date型(日期)
            default:
                return sValue.toString();   //转换为字符串

        }
    }
     function generateCompareTRs(iColIndex,sDataType) {    //类型索引,类型

        return function compareTRs(oTR1, oTR2) {

            var vValue1 = convert(oTR1.cells[iColIndex].firstChild.nodeValue, sDataType);
            var vValue2 = convert(oTR2.cells[iColIndex].firstChild.nodeValue, sDataType);

            if (vValue1 > vValue2) {
                return -1;
            } else if (vValue1 < vValue2) {
                return 1;
            } else {
                return 0;
            }
        };
    }
     function sortTR(){
          var oTable = document.getElementById('t1');
          var oTBody = oTable.tBodies[0];
          var colDataRows = oTBody.getElementsByTagName('tr');
      var aTRs = new Array;
      for (var i = 0; i < colDataRows.length; i++) {
          if (!colDataRows[i].style.display) aTRs[aTRs.length] = colDataRows[i]; //要排序的显示列,显示的排序,不显示的不参与排序
      }
      aTRs.sort(generateCompareTRs(0,'int'));

      var oFragment = document.createDocumentFragment();
      for (var i = 0; i < aTRs.length; i++) {
          oFragment.appendChild(aTRs[i]);
      }

      oTBody.appendChild(oFragment);
     }
     function showAll(){
          var oTable = document.getElementById('t1');
          var oTBody = oTable.tBodies[0];
          var colDataRows = oTBody.getElementsByTagName('tr');
          for (var i = 0; i < colDataRows.length; i++) {
          if (colDataRows[i].style.display) colDataRows[i].style.display='';
      }
     }
</script>
<body> 
    <input type='button' onclick='sortTR()' value='排序'/>
    <input type='button' onclick='showAll()' value='全部显示'/>

    <table border='1' id='t1'>
          <tbody>
              <tr style="display: none;"><td>1</td><td>a</td></tr>
              <tr style="display: '';"><td>2</td><td>b</td></tr>
              <tr style="display: '';"><td>14</td><td>r</td></tr>
              <tr style="display: '';"><td>4</td><td>d</td></tr>
              <tr style="display: '';"><td>3</td><td>c</td></tr>
          </tbody>
    </table>
</body> 
</html> 
chou342175867
chou342175867   2015.07.02 23:23

table的属性就是tr,th,td。是这个格式。不需要去掉。

dongjinwang
dongjinwang   2015.07.28 00:00

主要显示的数据行添加特殊属性,然后收集这些数据行进行排序操作~

Csdn user default icon
上传中...
上传图片
插入图片