我试图在单击特定按钮时对表的列值进行排序。我首先想弄清楚如何使用预定义值对表进行排序(我的表中包含了 2 行具有实际值的行)。其次，在我完成对表中预定义值的排序之后。我希望能够添加一个“创建行”按钮，它可以随机生成任何值甚至字母。而且，单击按钮后，值仍将被排序。 我的代码被破坏了，我不知道为什么!
我陷入困境，找不到太多帮助!预先感谢各位!
//add row function
$(document).ready(function() {
$("#add_row").click(function() {
event.preventDefault();
var new1 = $("<tr><td>6</td><td>1</td><td><input id ='dr' class='btn btn-danger' type ='button' value= 'delete'></td></tr>").on('click', function() {
$(this).find('td').toggleClass('highlighted')
});
$('#myTable').append(new1);
});
//delete function
$('#myTable').on('click', '#dr', function() {
$(this).parent().parent().remove();
});
//sort function
$('#sort1,#sort2').on('click', function() {
var n1 = $(this).index();
console.log(n1);
var n2 = $('#myTable').find('tbody >tr:has(td)').get();
console.log(n2);
n1 += 1;
n2.sort(function(a, b) {
var vA = $(a).children(':nth-child(' + n1 + ')').text();
var vB = $(b).children(':nth-child(' + n1 + ')').text();
if (vA < vB) {
return -1;
} else if (vA > vB) {
return 1;
} else {
return 0
};
});
$.each(n2, function(index, row) {
$('tbody').append(row);
});
});
});<!DOCTYPE html>
<html lang="en">
<head>
<title>create table</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
table,
td {
border: 1px solid black;
}
.highlighted {
background-color: yellow;
}
</style>
</head>
<body>
<div class="container">
<p>Click the buttons to create and delete row(s) for the table.</p>
<table id="myTable" class="table" style="width: 80%">
<tbody>
<tr>
<td>Name<button type="button" id="sort1" class="btn btn-default btn-xs pull-right glyphicon glyphicon-triangle-bottom"></button></td>
<td>Value<button type="button" id="sort2" class="btn btn-default btn-xs pull-right glyphicon glyphicon-triangle-bottom"></button></td>
<td>Deletable</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<br>
<button type="button" id="add_row" class="btn btn-primary">Create row</button>
</div>
</body>最佳答案
如果您更改 <td>，则在第一行中标签为<th>然后排序会将它们留在原来的位置。
<th>Name<button type="button" id="sort1" class="btn btn-default btn-xs pull-right glyphicon glyphicon-triangle-bottom"></button></th>
<th>Value<button type="button" id="sort2" class="btn btn-default btn-xs pull-right glyphicon glyphicon-triangle-bottom"></button></th>
<th>Deletable</th>
在您的代码中，当获取单击按钮的索引时，您始终会获得 $(this) 的索引这是按钮的索引，而不是列的索引。所以尝试将该行更改为
var n1 = $(this).closest("th").index();
它应该可以工作。
//add row function
$(document).ready(function() {
$("#add_row").click(function() {
event.preventDefault();
var new1 = $("<tr><td>6</td><td>1</td><td><input id ='dr' class='btn btn-danger' type ='button' value= 'delete'></td></tr>").on('click', function() {
$(this).find('td').toggleClass('highlighted');
});
$('#myTable').append(new1);
});
//delete function
$('#myTable').on('click', '#dr', function() {
$(this).parent().parent().remove();
});
//sort function
$('#sort1,#sort2').on('click', function() {
var n1 = $(this).closest("th").index() + 1;
console.log(n1 - 1);
var n2 = $('#myTable').find('tbody >tr:has(td)').get();
console.log(n2);
n2.sort(function(a, b) {
var vA = $(a).children(':nth-child(' + n1 + ')').text();
var vB = $(b).children(':nth-child(' + n1 + ')').text();
if (vA < vB) return -1;
if (vA > vB) return 1;
return 0;
});
$.each(n2, function(index, row) {
$('tbody').append(row);
});
});
});<!DOCTYPE html>
<html lang="en">
<head>
<title>create table</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
table,
td {
border: 1px solid black;
}
.highlighted {
background-color: yellow;
}
</style>
</head>
<body>
<div class="container">
<p>Click the buttons to create and delete row(s) for the table.</p>
<table id="myTable" class="table" style="width: 80%">
<tbody>
<tr>
<th>Name<button type="button" id="sort1" class="btn btn-default btn-xs pull-right glyphicon glyphicon-triangle-bottom"></button></th>
<th>Value<button type="button" id="sort2" class="btn btn-default btn-xs pull-right glyphicon glyphicon-triangle-bottom"></button></th>
<th>Deletable</th>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<br>
<button type="button" id="add_row" class="btn btn-primary">Create row</button>
</div>
</body>关于javascript - 使用 jquery 不使用插件对表的列进行排序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44381352/