s364136299 2015-07-02 01:37 采纳率: 33.3%
浏览 2096
已采纳

js排序时因为tbody中有2个TR,所以排序不成功,求大神帮忙处理下(已哭)

JS:
/转换器,将列的字段类型转换为可以排序的类型:String,int,float

            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[1];

                var colDataRows = oTBody.getElementsByTagName('tr')[0].row;;
                alert(colDataRows.innerHTML);
                var aTRs = new Array;

                //将所有列放入数组
                for (var i=0; i < colDataRows.length; i++) {  
                    aTRs[i] = 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;
            }


                    TBODY:
                    <tbody>

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

                                                <tr <s:if test="#st.odd">class="info"</s:if><s:else>class="warning"</s:else>>
                                                    <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>

                    排序的行:
                        <tr>
                                        <th width="5%"  onClick="sortTable('operations_strategies_forciblyAdd_table',0,'int')">日期</th>
                                        <th width="13%">广告</th>             
                                        <th width="7%"  onClick="sortTable('operations_strategies_forciblyAdd_table',2,'int')">PUSH</th
  • 写回答

5条回答 默认 最新

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

    帮你改了下结构,自己看下面的代码,showDetail函数也帮你修改过了,注意看代码注释,记得采纳

     <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();   //转换为字符串
    
            }
        }
    
        //排序函数产生器,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[1];
    
            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('rel' + aTRs[i].getAttribute('display'));
                console.log(trDetail);//获取详细的数据行
                oTBody.insertBefore(trDetail, aTRs[i]);//第一次插入,详细行被插入到排列好的指示行前面,所以还得执行一次下面的操作
                oTBody.insertBefore(aTRs[i], trDetail);
            }
        }
        function showDetail(a) {
            var tr = a.parentNode.parentNode, nextTR = document.getElementById('rel' + tr.getAttribute('display'));
            nextTR.style.display=nextTR.style.display=='none'?'':'none'
        }
    </script>
                   <table id="tb" border="1"><tr>
                                                        <td onclick="sortTable('tb',0)">sdate</td>
                                                        <td  style="text-align: center;font-size:12px;" >操作</td>
                                                        <td>pushu</td>
                                                        <td>djsu</td>
                                                        <td>xzcgu</td>
                                                        <td>xzsbu</td>
                                                        <td>azsu</td>
                                                        <td>md5u</td>
                                                        <td>xzsu</td>
                                                        <td>llqdku</td>
                                                        <td>zjdku</td>
                                                        <td>bmbppu</td>
                                                        <td>yhqxu</td>
                                              </tr>    <tbody>
    
                                                    <tr display="1"><!-----新增display属性,和详细列关联起来------>
                                                        <td>sdate1</td>
                                                        <td  style="text-align: center;font-size:12px;" >
                                                        <a onclick="showDetail(this)" style="cursor: pointer;" >adname1</a>
                                                        </td>
                                                        <td>pushu</td>
                                                        <td>djsu</td>
                                                        <td>xzcgu</td>
                                                        <td>xzsbu</td>
                                                        <td>azsu</td>
                                                        <td>md5u</td>
                                                        <td>xzsu</td>
                                                        <td>llqdku</td>
                                                        <td>zjdku</td>
                                                        <td>bmbppu</td>
                                                        <td>yhqxu</td>
    
                                                    </tr>
                                                    <tr style="display: none;"  id="rel1"><!--注意id和显示列的display属性关系,要生成此类型的结构,其实就一个变量递增就行-->
                                                    <td  colspan="13" >
                                                        <input type="hidden" value="0" id="operations_reportAd_reportAdList_table_tr_adid_sdate1_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>日期1</th>
                                                              <th>广告词标题1</th>
                                                              <th>广告形式1</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_adid_sdate1_table_tbody">
    
                                                          </tbody>
                                                        </table>
                                                        </div>
                                                    </td>
                                                    </tr>
    
                                                    <tr  display="2">
                                                        <td>sdate2</td>
                                                        <td  style="text-align: center;font-size:12px;" >
                                                        <a onclick="showDetail(this)" style="cursor: pointer;" >adname2</a>
                                                        </td>
                                                        <td>pushu</td>
                                                        <td>djsu</td>
                                                        <td>xzcgu</td>
                                                        <td>xzsbu</td>
                                                        <td>azsu</td>
                                                        <td>md5u</td>
                                                        <td>xzsu</td>
                                                        <td>llqdku</td>
                                                        <td>zjdku</td>
                                                        <td>bmbppu</td>
                                                        <td>yhqxu</td>
    
                                                    </tr>
                                                    <tr style="display: none;" id="rel2"><!--注意id和显示列的display属性关系,要生成此类型的结构-->
                                                    <td  colspan="13" >
                                                        <input type="hidden" value="0" id="Hidden1">
                                                        <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>日期2</th>
                                                              <th>广告词标题2</th>
                                                              <th>广告形式2</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="Tbody1">
    
                                                          </tbody>
                                                        </table>
                                                        </div>
                                                    </td>
                                                    </tr>
    
    
    
                                            </tbody></table>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(4条)

报告相同问题?

悬赏问题

  • ¥15 delta降尺度计算的一些细节,有偿
  • ¥15 Arduino红外遥控代码有问题
  • ¥15 数值计算离散正交多项式
  • ¥30 数值计算均差系数编程
  • ¥15 redis-full-check比较 两个集群的数据出错
  • ¥15 Matlab编程问题
  • ¥15 训练的多模态特征融合模型准确度很低怎么办
  • ¥15 kylin启动报错log4j类冲突
  • ¥15 超声波模块测距控制点灯,灯的闪烁很不稳定,经过调试发现测的距离偏大
  • ¥15 import arcpy出现importing _arcgisscripting 找不到相关程序