【发布时间】：2018-02-14 09:27:14
【问题描述】：
我有一个 HTML 表格，有八列，其值由逗号、小数点等分隔。还有一些是百分比值和小时值。如何在第一次单击时按降序对值进行排序，在第二次单击时按升序对值进行排序单击相应的列标题时单击。
我尝试排序的代码如图：
function getVal(elm, n) {
var v = $(elm).find('td').eq(n).text().toUpperCase();
var num = v.split(/ /)[0].replace(/[^\d]/g, '')
num = parseFloat(num);
if ($.isNumeric(num)) {
v = parseInt(num, 10);
}
return v;
}
var f = 1;
$(".table-sortable .column-head").find('span').click(function(event) {
event.preventDefault();
table = $(this).closest('table');
th = $(this).parent();
$(th).find('span').toggleClass('rotate');
f *= -1;
var n = th.prevAll().length;
console.log(n);
var rows = table.find('tbody tr').get();
rows.sort(function(a, b) {
var A = getVal(a, n);
var B = getVal(b, n);
if (A < B) {
return -1 * f;
}
if (A > B) {
return 1 * f;
}
return 0;
});
$.each(rows, function(index, row) {
table.children('tbody').append(row);
});
});HTML 表格：
<table class="table-sortable" id="myTable">
<thead>
<tr>
<th scope="col" class="column-head"><span>abc1</span></th>
<th scope="col" class="column-head"><span>abc2</span></th>
<th scope="col" class="column-head"><span>abc3</span></th>
<th scope="col" class="column-head"><span>abc4</span></th>
<th scope="col" class="column-head"><span>abc5</span></th>
<th scope="col" class="column-head"><span>abc6</span></th>
<th scope="col" class="column-head"><span>abc7</span></th>
<th scope="col" class="column-head"><span>abc8</span></th>
</tr>
</thead>
<tbody class="table-body">
<tr class="table-row">
<td scope="row" class="column-fixed">BU001</td>
<td class="column-values">18.240.00h</td>
<td class="column-values">200h</td>
<td class="column-values">46,13%</td>
<td class="column-values">12.600.00€</td>
<td class="column-values">77,00%</td>
<td class="column-values">43.10%</td>
<td class="column-values-end">2.82%</td>
</tr>
<tr class="table-row">
<td scope="row" class="column-fixed">AU003</td>
<td class="column-values">21.240.00h</td>
<td class="column-values">120h</td>
<td class="column-values">1,13%</td>
<td class="column-values">4.600.00€</td>
<td class="column-values">12,00%</td>
<td class="column-values">66.10%</td>
<td class="column-values-end">1.82%</td>
</tr>
<tr class="table-row">
<td class="column-fixed">AU309</td>
<td class="column-values">2.240.00h</td>
<td class="column-values">200h</td>
<td class="column-values">26,13%</td>
<td class="column-values">59.600.00€</td>
<td class="column-values">3,00%</td>
<td class="column-values">40.10%</td>
<td class="column-values-end">12.82%</td>
</tr>
<tr class="table-row">
<td class="column-fixed">DT907</td>
<td class="column-values">12.240.00h</td>
<td class="column-values">100h</td>
<td class="column-values">6,13%</td>
<td class="column-values">49.600.00€</td>
<td class="column-values">90,00%</td>
<td class="column-values">4.10%</td>
<td class="column-values-end">2.82%</td>
</tr>
</tbody>
</table>【问题讨论】：
-
你有一个很棒的 jquery 插件：datatables
-
以任何方式编辑我尝试排序的代码。这样我就可以轻松排序
-
有什么方法可以得到帮助？
-
有什么问题？当我在 sn-p 中测试时，您的代码似乎可以工作
-
请立即运行代码 sn-p。单击标题时，它没有得到排序
标签： javascript html jquery-plugins