s364136299 2015-07-02 10:10 采纳率: 33.3%
浏览 1816
已结题

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

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

  <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条回答

  • Go 旅城通票 2015-07-02 12:36
    关注

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

    评论

报告相同问题?

悬赏问题

  • ¥15 DIFY API Endpoint 问题。
  • ¥20 sub地址DHCP问题
  • ¥15 delta降尺度计算的一些细节,有偿
  • ¥15 Arduino红外遥控代码有问题
  • ¥15 数值计算离散正交多项式
  • ¥30 数值计算均差系数编程
  • ¥15 redis-full-check比较 两个集群的数据出错
  • ¥15 Matlab编程问题
  • ¥15 训练的多模态特征融合模型准确度很低怎么办
  • ¥15 kylin启动报错log4j类冲突