我有一个非常简单的 HTML 表格,有 4 列:
Facility Name, Phone #, City, Specialty
我希望用户能够仅按设施名称 和城市 进行排序。
我如何使用 jQuery 对此进行编码?
最佳答案
我遇到了这个,我想我会投入我的 2 美分。单击列标题可升序排序,再次单击可降序排序。
- 适用于 Chrome、Firefox、Opera 和 IE(8)
- 只使用 JQuery
- 进行字母和数字排序 - 升序和降序
$('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 = rows.reverse()}
for (var i = 0; i < rows.length; i++){table.append(rows[i])}
})
function comparer(index) {
return function(a, b) {
var valA = getCellValue(a, index), valB = getCellValue(b, index)
return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.toString().localeCompare(valB)
}
}
function getCellValue(row, index){ return $(row).children('td').eq(index).text() }
table, th, td {
border: 1px solid black;
}
th {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr><th>Country</th><th>Date</th><th>Size</th></tr>
<tr><td>France</td><td>2001-01-01</td><td>25</td></tr>
<tr><td><a href=#>spain</a></td><td>2005-05-05</td><td></td></tr>
<tr><td>Lebanon</td><td>2002-02-02</td><td>-17</td></tr>
<tr><td>Argentina</td><td>2005-04-04</td><td>100</td></tr>
<tr><td>USA</td><td></td><td>-6</td></tr>
</table>
** 更新:2018
- 对于那些感兴趣的人,我提供了一个 ES6 Plain Javascript solution here .
关于jQuery 表格排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3160277/