使用jquery each对表中的数据进行重新排序
jQuery是一款流行的JavaScript库，它简化了客户端脚本编写的过程，并提供了丰富的特性和插件。其中的each方法用于遍历集合中的元素，并对每个元素执行特定的操作。
对于重新排序表中的数据，可以使用jQuery each方法来实现。下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表数据重新排序</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 5px;
}
</style>
</head>
<body>
<table id="myTable">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
</tr>
<tr>
<td>王五</td>
<td>20</td>
</tr>
</table>
<script>
$(document).ready(function() {
var rows = $('#myTable tbody tr').get();
rows.sort(function(a, b) {
var nameA = $(a).find('td:first').text().toUpperCase();
var nameB = $(b).find('td:first').text().toUpperCase();
if (nameA < nameB) {
return -1;
}
if (nameA > nameB) {
return 1;
}
return 0;
});
$.each(rows, function(index, row) {
$('#myTable').append(row);
});
});
</script>
</body>
</html>在上述代码中，我们首先通过$('#myTable tbody tr').get()获取到表格中的行元素，并存储在一个数组中。然后使用sort方法对这个数组进行排序，排序的规则是根据第一列的文本内容进行字母顺序排序。最后通过$.each方法遍历排序后的数组，并将每个行元素添加回表格中，从而实现了表数据的重新排序。
这里推荐的腾讯云相关产品是腾讯云对象存储（COS）服务。腾讯云对象存储（COS）是一种海量、安全、低成本、高可靠的云存储服务，适用于存储任意类型的文件，包括文档、图片、音视频等。您可以将表格中的数据导出为文件并存储到腾讯云对象存储中，实现数据的持久化存储和备份。
腾讯云对象存储（COS）产品介绍链接地址：https://cloud.tencent.com/product/cos
注意：以上仅为示例代码和腾讯云相关产品介绍，具体使用和推荐的产品还需根据实际需求进行选择。
相关·内容
我从数据库中提取了这组数据。价格不同，但有些数据是多余的。 以下是数据的屏幕截图。 ? 我想要的表格是这样的。 ? 我使用.each()在jQuery中对它们进行了整理，但我得到的结果是一个巨大的失败。 ? 只有表头和第一行表体是正确的。data.length;
var route_price_b
浏览 14提问于2020-07-18得票数 0
我正在尝试对一个表进行排序，所以当用户单击表标题时，它将按升序/降序进行排序。到了可以根据列值对表进行排序的地步。但是，我有表行的分组(每个表体两行)，我想根据每个表体第一行的列中的值对列进行排序，但当它对表进行重新排序时，它希望它对表体进
浏览 6提问于2011-05-24得票数 5
回答已采纳
我使用Jquery UI Sortable对表行进行重新排序。拖放按预期工作，但我需要使用moousedown事件而不是拖动事件来激活sortable。下面是相同的。helper: fixWidthHelper ui.children().each
浏览 0提问于2018-02-07得票数 0
我有一个数据集，其中有一个名为detail的表，我想对其进行排序。我知道使用数据视图可以使用以下代码对表进行排序。parsedDataset.Tables("Detail"))我不仅要对表进行排序，而且要将它<em
浏览 1提问于2014-05-14得票数 0
回答已采纳
我有一个带有jQuery DataTables的表，希望允许手动重新排序。因此，我正在使用。现在，我希望启用排序，即使在手动重新排序</em
浏览 3提问于2015-09-21得票数 3
回答已采纳
4回答
有人知道使用jQuery对表列进行重新排序的方法吗？
我的意思不是排序--我是指在表中动态地向左或向右移动整个列。我知道优秀的，但我不需要允许用户移动列的东西，我需要的是以可配置的方式进行重新排序的东西。
浏览 0提问于2011-07-20得票数 12
回答已采纳
是否有一个jquery函数来对表进行排序。我知道JQuery表排序插件，但如果可能的话，我想避免使用它。编辑:我可以在Javascript中对表格进行排序吗？
浏览 3提问于2009-03-20得票数 4
根据问题，我想使用jquery对表格中的空白单元格进行重新排序，而不是删除单元格。所有有数据的单元格将是第一个，然后空单元格应该在那里。
如何做到最好。我的表包含10个cols和一些行...cols将被修复。我只想在不删除单元格的情况下重新排序。
浏览 1提问于2010-01-25得票数 2
我有一个jQuery函数来上下移动表行。我不知道如何保存数据，也不知道每行的位置。我使用PHP来显示表行。
当用户对表行进行重新排序时，如何获取每个表行的位置值？
浏览 1提问于2010-01-15得票数 31
回答已采纳
1回答
我试图使用DataTables按特定列对表进行排序，但我收到以下警告：
jQuery('.sp-template-league-table table').DataTable({ paging: false, searching: false, info: false, re
浏览 9提问于2015-10-20得票数 0
4回答
如果我在MSSQL中的一个表中有这个数据，它表示对象及其坐标的水平行：35395 776130 03539510035395 776137 6035395 776139 20如何使用update语句在不逐个执行的情况下完成此操作？
浏览 0提问于2009-09-20得票数 2
回答已采纳
我在一个可排序的表格中出现了一些字体很棒的图标。它们呈现得很好，但是当我对表中的行进行重新排序时，图标仍然保持在原来的位置，并且不排序(重新呈现？)和其他表的内容。我用的是Svelte3和Bulma。我猜我需要使用Svelte的bind:this属性，但我不确定确切的位置。(表格行是在Svel
浏览 16提问于2020-04-24得票数 0
我使用以下代码对表中的行进行排序。function (event, ui) { } 但现在的问题是我不能对表进行更改我的实际表格有输入字段，因此用户可以输入输入数据。这就是我不能只使用disableSelection<
浏览 2提问于2012-02-26得票数 0
3回答
所以我使用php回显表格。我从数据库中获取数据并填充表。现在我得到的数据不是按顺序排列的。所以我的桌子不整齐。=========================Shwarma | 1 | 50我想使用任何方法javascript、jquery、php对表进行重新
浏览 37提问于2019-07-25得票数 0
回答已采纳
我有一个wicket表单-当我单击submit时-它显示了数据库中的动态表-我希望表是可排序的-所以我使用listview repeater和table sorttable.js来对表进行排序。现在，当我重新刷新页面时-我可以使用排序功能-但当我单击提交时，我无法对表进行排序
wmc.add(new Attribu
浏览 2提问于2012-04-03得票数 1
回答已采纳
我有一个包含项目列表的数据库表。相关字段为item name和list_order。Milk 1Cereal 3
我想使用JQuery UI将谷物拖到列表的顶部，并将其反映在数据库
浏览 0提问于2012-01-13得票数 1
我有一个类似下面的表格，我希望能够按# responses，# like，# of views进行升序排序：(通过一个标签<a>，最好是点击一次) <tr
浏览 4提问于2019-03-14得票数 0
它有几个列，其中一些列传递数字数据。我希望最终用户能够单击列标题/页脚，以便能够根据该列对表中的行进行排序。使用jQuery就足够简单了.jQuery也有类似的东西吗？
浏览 7提问于2018-08-21得票数 1
回答已采纳
我有一个从服务器端PHP脚本加载数据的表，该脚本以JSON的形式返回该表，以便jQuery dataTables呈现。然后，我使用jQuery tableDnD插件来允许对表进行拖放重新排序，这要求表的行包含与数据库(即<tr id="1"> )中的表行匹配的id。我想知道如何使用</em
浏览 4提问于2010-12-08得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
