我正在使用这个JQuery代码对表进行排序。表格的行如下所示,单击按钮时隐藏的值变为可见:
<tr>
<td>A-1</td>
<td nowrap>A-2</td>
<td>A-3</td>
</tr>
<tr>
<td class="hidden">A-1</td>
<td class="hidden" nowrap>B-1</td>
<td class="hidden">C-1</td>
<td class="hidden" colspan="3">
<div id="A-row-additional-info" >
<strong>additional info 1</strong>
<br/><strong>additional info 2</strong>
<br/><strong>additional info 3</strong>
</div>
</td>
</tr>
和我用来排序的JS代码是:
$('th').click(function () {
var table = $(this).parents('table').eq(0);
var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()));
this.asc = !this.asc;
if (!this.asc) {
rows = table.find('tr:gt(0)').toArray().sort(comparerReverse($(this).index()));
$(this).find('a').html('▾');
} else {
$(this).find('a').html('▴');
}
for (var i = 0; i < rows.length; i++) {
table.append(rows[i]);
}
});
function comparer(index) {
return function (a, b) {
var valA;
var valB;
if (getCellValue(a, index).match(/^[0-9]{1,2}[\/][0-9]{1,2}[\/][0-9]{4}[ ][0-9]{1,2}[:][0-9]{1,2}[:][0-9]{1,2}[ ][a-zA-Z]{2}$/) != null)//comparing dates
{
valA = new Date(getCellValue(a, index)).setMilliseconds(0);
valB = new Date(getCellValue(b, index)).setMilliseconds(0);
}
else {
valA = getCellValue(a, index);
valB = getCellValue(b, index);
}
return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.localeCompare(valB);
}
}
function comparerReverse(index) {
return function (a, b) {
var valA;
var valB;
if (getCellValue(a, index).match(/^[0-9]{1,2}[\/][0-9]{1,2}[\/][0-9]{4}[ ][0-9]{1,2}[:][0-9]{1,2}[:][0-9]{1,2}[ ][a-zA-Z]{2}$/) != null)//comparing dates
{
valA = new Date(getCellValue(a, index)).setMilliseconds(0);
valB = new Date(getCellValue(b, index)).setMilliseconds(0);
}
else {
valA = getCellValue(a, index);
valB = getCellValue(b, index);
}
return $.isNumeric(valB) && $.isNumeric(valA) ? valB - valA : valB.localeCompare(valA);
}
}
function getCellValue(row, index) { return $(row).children('td').eq(index).html(); }
这在IE和FireFox中都运行良好,但在Chrome中,隐藏的行未正确排序。有谁知道为什么以及如何解决这个问题?