问题描述
- js排序时因为tbody中有2个TR，所以排序不成功，求大神帮忙处理下（已哭）
-
JS：
/转换器，将列的字段类型转换为可以排序的类型：String,int,floatfunction 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
解决方案
帮你改了下结构，自己看下面的代码，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>
解决方案二：
排序直接从后台查询 时sql语句排序就可以流量，前台自己弄不科学
解决方案三：
解决方案四：
解决方案五：
排序直接从后台查询 时sql语句排序就可以流量，前台自己弄不科学
时间： 2024-10-28 09:01:57