如何使用JavaScript对HTML表格进行排序？
排序使用JavaScript的HTML表格，代码如下 -
示例
<!DOCTYPE html>
<html>
<head>
<title>Sort a HTML Table Alphabetically</title>
<style>
button {
padding: 10px;
margin-bottom: 5px;
font-size: 16px;
font-weight: bold;
}
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
table {
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
th, td {
border-top: 1px solid black;
text-align: left;
padding: 16px;
}
</style>
</head>
<body>
<h1>Sorting table example</h1>
<button onclick="sortTable()">Sort</button>
<table class="filterTable">
<tr>
<th>Name</th>
<th>BirthDay Month</th>
</tr>
<tr>
<td>Ron</td>
<td>January</td>
</tr>
<tr>
<td>Shawn</td>
<td>April</td>
<tr>
<tr>
<td>Caleb</td>
<td>December</td>
</tr>
<tr>
<td>Bruno</td>
<td>February</td>
</tr>
<tr>
<td>Jack</td>
<td>October</td>
</tr>
<tr>
<td>Max</td>
<td>November</td>
</tr>
</table>
<script>
function sortTable() {
var filterTable, rows, sorted, i, x, y, sortFlag;
filterTable = document.querySelector(".filterTable");
sorted = true;
while (sorted) {
sorted = false;
rows = filterTable.rows;
for (i = 1; i < rows.length - 1; i++) {
sortFlag = false;
x = rows[i].getElementsByTagName("TD")[0];
y = rows[i + 1].getElementsByTagName("TD")[0];
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
sortFlag = true;
break;
}
}
if (sortFlag) {
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
sorted = true;
}
}
}
</script>
</body>
</html>
输出结果
上面的代码将产生以下输出 -
在点击排序按钮-
-
问题内容： 我正在寻找一种表排序解决方案（使用JavaScript），但似乎还找不到合适的解决方案。我只需要按字母顺序对每一列进行排序。它不需要忽略任何代码或任何数字或使用货币。只需单击列标题即可将其从排序的z / za中切换出来。 有人知道这样一个非常简单的解决方案吗？ 问题答案： 纯Javascript（ES6） 进行字母和数字排序-升序和降序 可在 Chrome ， Firefox ， Sa
-
本文向大家介绍如何使用JavaScript对HTML列表进行排序？，包括了如何使用JavaScript对HTML列表进行排序？的使用技巧和注意事项，需要的朋友参考一下 要使用JavaScript对HTML列表进行排序，代码如下- 示例 输出结果 上面的代码将产生以下输出- 在点击“点击排序”按钮-
-
问题内容： 我有一组三个列表项，它们希望在页面加载时从高到低自动显示。理想情况下使用jquery或javascript。 每个列表项都需要有自己的ID，因为它们每个都有各自的背景图像。数字必须是文本节点，以便用户可以编辑它们。 问题答案： 这可能是最快的方法，因为它不使用jQuery： 像下面这样调用函数： 您可以以相同的方式对其他列表进行排序，如果列表类在同一页面上还有其他元素，则应给您的ul一
-
问题内容： 我知道这是很基本的事情，但是Google搜索并没有显示单击链接后如何对行进行重新排序。 我有这个： 我需要能够按字母顺序单击并排序，然后单击或并按日期排序。我看到我需要MySQL查询来执行此操作，但是是否将它们设置为带有标签的条件查询？ 问题答案： 最简单的方法是在您的列标题上放置一个链接，指向同一页面。在查询字符串中，放置一个变量，以便您知道他们单击了什么，然后在SQL查询中使用OR
-
这是我的节点类： 我有一个单链表，需要使用插入排序进行排序。我对常规列表的插入排序有很好的理解，但对链表没有。我发现另一个帖子，一个用户说： 让我们考虑一下插入排序是如何工作的：它将列表“拆分”（理论上）为三组：已排序的子集（可能为空）、当前项和未排序的子集（可能为空）。排序当前项之前的所有内容。当前项之后的所有内容都可以排序，也可以不排序。算法检查当前项，并将其与下一项进行比较。请记住，当前项之
-
问题内容： 我有一个对象数组： 如何获得按属性名称升序排列的数组？ 我尝试这样做：，但这不起作用。 请帮我！ 编辑：数组可以包含两个以上的对象！它可以包含数百个。 编辑： 为什么在“重复的”问题问了两年之前，这个问题为什么被标记为重复？ 问题答案：