我正在尝试在单击特定按钮时对表格的列值进行排序。我首先要弄清楚如何使用预定义的值对表进行排序（我在表中包含了2行和实际值）。其次，在我完成对表中的预定义值的排序之后。我希望能够添加一个＆＃34;创建行＆＃34;按钮，可以随机生成任何值甚至字母。仍然，在单击按钮后，将对值进行排序。 我的代码坏了，我不知道为什么！
我被困住了，我找不到多少帮助!!先谢谢你们！
//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>
答案 0 :(得分：1)
如果您将<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>