所以我有一个 Bootstrap 表，我可以通过 selectbox 中的 onchange 对它进行排序。但我想按自定义列对表格进行排序。当我选择选项 1 时，我应该对列 [1] 进行排序，否则对列 [2] 进行排序(在选定的选项 2 上)。 Column[1]-Name 必须升序排列，Column[2]-Address 降序排列或者谁能给我正确的方法？
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
</head>
<body>
<div class="container">
<div class="row d-flex justify-content-center align-items-center">
<div class="col-12">
<select class="m-auto" id="select" onchange="sortTable();">
<option value="" disabled selected>SORTING </option>
<option value="0">NAMES Ascending</option>
<option value="1">ADDRESS Descending</option>
</select>
</div>
</div>
<div class="row mt-3">
<div class="col-12">
<table class="table" id="myTable">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Address</th>
<th scope="col">City</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Inna</td>
<td>St. Park 3 </td>
<td>London</td>
</tr>
<tr>
<td>2</td>
<td>Anna</td>
<td>Boston Street 4 </td>
<td>London</td>
</tr>
<tr>
<td>3</td>
<td>Emma</td>
<td>Harrow 19 </td>
<td>London</td>
</tr>
<tr>
<td>4</td>
<td>Chris</td>
<td>Antoan Blick 19 </td>
<td>London</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
<script>
function sortTable() {
var rows = $("#myTable tbody tr").get();
rows.sort(function (a, b) {
var A = $(a)
.children("td")
.eq(1)
.text()
.toUpperCase();
var B = $(b)
.children("td")
.eq(2)
.text()
.toUpperCase();
if (A < B) {
return -1;
}
if (A > B) {
return 1;
}
return 0;
});
$.each(rows, function (index, row) {
$("#myTable")
.children("tbody")
.append(row);
});
}
</script>
最佳答案
按照脚本更新你的脚本
function sortTable() {
var rows = $("#myTable tbody tr").get();
var selected_column = $('#select').val();
selected_column = +selected_column+1;
rows.sort(function (a, b) {
var A = $(a)
.children("td")
.eq(selected_column)
.text()
.toUpperCase();
var B = $(b)
.children("td")
.eq(selected_column)
.text()
.toUpperCase();
if(selected_column==1){
return ascending(A,B);
}else if(selected_column==2){
return descending(A,B);
}
});
$.each(rows, function (index, row) {
$("#myTable")
.children("tbody")
.append(row);
});
}
function ascending(A,B){
if (A < B) {
return -1;
}
if (A > B) {
return 1;
}
return 0;
}
function descending(A,B){
if (A < B) {
return 1;
}
if (A > B) {
return -1;
}
return 0;
}
关于javascript - 我如何使用 jQuery 按自定义列对表进行排序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58893272/