如何使用直接javascript根据每隔一行对表进行排序
要根据每隔一行对表格进行排序，可以使用JavaScript来实现。以下是一个示例代码，展示了如何实现这一功能：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sort Table by Alternate Rows</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
</style>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>25</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
</tr>
<tr>
<td>Charlie</td>
<td>20</td>
</tr>
<tr>
<td>David</td>
<td>35</td>
</tr>
</tbody>
</table>
<button onclick="sortAlternateRows()">Sort Alternate Rows</button>
<script>
function sortAlternateRows() {
const table = document.getElementById('myTable');
const rows = Array.from(table.rows).slice(1); // Exclude the header row
const evenRows = rows.filter((_, index) => index % 2 === 0);
const oddRows = rows.filter((_, index) => index % 2 !== 0);
evenRows.sort((a, b) => {
const aValue = a.cells[1].textContent;
const bValue = b.cells[1].textContent;
return aValue.localeCompare(bValue);
});
oddRows.sort((a, b) => {
const aValue = a.cells[1].textContent;
const bValue = b.cells[1].textContent;
return aValue.localeCompare(bValue);
});
// Clear the table body and append sorted rows
while (table.tBodies[0].firstChild) {
table.tBodies[0].removeChild(table.tBodies[0].firstChild);
}
evenRows.forEach(row => table.tBodies[0].appendChild(row));
oddRows.forEach(row => table.tBodies[0].appendChild(row));
}
</script>
</body>
</html>解释
- HTML结构：创建一个简单的表格，包含表头和数据行。
- CSS样式：为表格添加基本的样式，使其更易读。
- JavaScript逻辑：
- 获取表格的所有行，并排除表头行。
- 将行分为偶数行和奇数行。
- 分别对偶数行和奇数行进行排序，这里以第二列（年龄）为排序依据。
- 清空表格内容，并按顺序重新插入排序后的行。
应用场景
- 这种方法适用于需要对表格数据进行特定排序的场景，例如按奇偶行分别排序，或者在某些特定需求下对数据进行分组排序。
参考链接
通过这种方式，你可以灵活地对表格的奇偶行进行排序，满足特定的数据处理需求。
相关·内容
我正在尝试对一个表进行排序，该表包含一个具有多个字段的数据行，后跟与前一行相关的数据行，但它是一个跨越所有列的长数据字段。 它工作得很好，直到我不得不在其他行之间添加额外的数据行。我试着改变增量并四处移动，但我不能很好地理解这样的逻辑:每隔一行进行排序，然后同时移动该行(数据排序行)和下一行(扩展数据行)。<td>Data2-6</td> <
浏览 28提问于2019-10-19得票数 0
2回答
我应该如何解决下面的problem> --我有关于表中多个相关行中的每个实体的数据--(我知道使用表已经过时了，我应该使用div，但我对表没有意见。如果有必要，我会改变的。)我每隔x秒就使用jQuery将新的数据放入细胞的ids中。，我需要一个javascript函数，或者允许我根据多个队列行重新排序表的东西。我愿意接受任何其他方法。>例如，我想根据分数进
浏览 0提问于2018-02-10得票数 0
回答已采纳
模型数据将每隔几秒钟更新一次，可以添加新的行，或者修改特定的模型数据。例如，当修改现有行的数据时，我使用一个按钮来更改第一行的优先级。Public void handle(ActionEvent event){
data.get(0).setPriority("HIGH"
浏览 0提问于2018-05-15得票数 0
我使用jQuery和tablesorter插件对表进行排序。一切都很棒，但我想每隔5行左右插入几行，并让这些行保持在该位置，无论表是如何排序的。
我在谷歌上到处搜索，什么也没找到。我在想也许可以使用隐藏的表行和强制排序，但我不确定我将在行中放入什么，或者如何对其排序(升序与降序)。
浏览 3提问于2009-07-06得票数 0
回答已采纳
我做了一些研究，但找不到按特定顺序(即按特定列表)后的列对表(列表列表)进行排序的方法。My_table=sorted(My_table, key=lambda a: ( a[0], a[1]))
现在，我需要先按第一列
浏览 3提问于2013-05-30得票数 2
回答已采纳
2回答
我需要做的是让用户根据字段的值(是/否)对表进行排序。我查看了views.py，发现有一个视图可以根据id对表进行排序：我的问题是：
如何使视图基于url参数对表进行排序我是否必须创建另一个视图，还是可以通过某种修改使用相同的视图？
浏览 4提问于2013-05-14得票数 0
我想使用java.swing.table.TableRowSorter对表行进行排序。Table类没有提供任何使用行排序器的API，所以我尝试直接在对等点上设置它 import javax.swing.tablemodel = myModel
}
现在，当我单击列标题时，我会看到小的向上
浏览 0提问于2012-03-07得票数 3
回答已采纳
1回答
嗨，我想排序我的波斯表与JavaScript时，点击头部。我使用w3school示例。这是正确的工作在英语，但在波斯语一些字符不计算(گچپژ)的排序。我使用的代码是： function sortTable(n) { var table, rows, switching, i, x,
浏览 1提问于2022-09-04得票数 0
回答已采纳
我使用的是。我的问题与类似于的问题有关，但我不希望最顶端的行对表进行排序。我尝试将class="sorter-false"添加到我的标签中。请注意，标题的顶行有一个排序箭头。单击页面导航箭头可对表格进行排序。
如何防止表头第一行出现这种情况？
浏览 1提问于2015-11-06得票数 0
1回答
我有一个从数据库获取行的C++桌面应用程序，对于每一行，该应用程序创建一个对象，该对象表示该特定表中的该行。每个表都有其对应的类(我使用来实现)。一旦我恢复了表中的行，我就将它们显示在一个表中，该表可以按列排序。每一列都有一个“排序”图标，允许根据该列对表条目进行排序。
我的问题是，高质量的应用程序通常能做什么？是否每次必须对表进行排序时都进行其他查询？或者手动对对象进行<
浏览 2提问于2016-02-25得票数 0
我试图根据E列中的数据项对表进行排序。然而，当我使用我的代码时，(下面)我的列变得杂乱无章和不匹配。每一行都需要包含与排序前相同的数据条目，只需根据E列中的值进行排序。我正在尝试对此表进行排序，预期结果如下： With Worksheets("Fruits") Dim Fruit
浏览 2提问于2021-01-20得票数 1
回答已采纳
我正在尝试对一个表进行排序，所以当用户单击表标题时，它将按升序/降序进行排序。到了可以根据列值对表进行排序的地步。但是，我有表行的分组(每个表体两行)，我想根据每个表体第一行的列中的值对列进行排序，但当它对表进行重新排序时，它希望它对表体进行重新排序，而不是
浏览 6提问于2011-05-24得票数 5
回答已采纳
我正在使用 jQuery插件对我的网站上的表进行排序。除了对日期字段进行排序外，它就像梦一样工作。我有DD MMM YYYY格式的日期。excel引导表过滤器是根据DD值对表进行排序.有人知道如何让插件对日期进行正确的排序吗？
浏览 2提问于2018-05-05得票数 6
回答已采纳
我对javascript很陌生。这是我的问题。我希望根据单击表中的标头(Bytes)的值对表进行排序。我想要编写自定义的排序函数，其中我将千兆字节、兆字节转换为字节并对它们进行排序，而不是使用"sortable“函数。
有人能帮我吗？
浏览 4提问于2014-05-19得票数 0
根据本文：使用RAND()的ORDER是个坏主意，因为：
问题是，MySQL必须对表中的每一行执行RAND()操作(这需要处理能力)，然后再对其进行排序，只给您1行。现在，一些工作人员最近发现，在使用MsSQL时，可以使用NEWID()的ORDER (我对此不太了解)。现在，我的问题是，使用NEWID()和使用RAND()一样糟糕吗?如果是，那么应该如何做呢？
浏览 2提问于2011-03-31得票数 4
回答已采纳
表行应按列排序；列由sort_index指定，该列是通过按下表标题之一生成的。我将发表我自己的解决方案，以澄清真正的问题。
浏览 0提问于2019-01-08得票数 1
回答已采纳
表A列如下：表B列如下：基本上，表B在每次用户查看表A中的一行时都包含一行。我的问题是如何根据表B中匹配的行数对表A结果进行排序。
浏览 8提问于2010-05-19得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
