使用jQuery交换表行，并将新行顺序保存在数据库中，以便在离开页面时获得相同的顺序
，可以通过以下步骤实现：
- 首先，确保你已经引入了jQuery库，可以通过以下方式引入：<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
- 在HTML中创建一个表格，并为每一行的行号添加一个自定义属性，例如
data-row-id，用于标识每一行的唯一ID。示例代码如下：<table id="myTable"> <tr data-row-id="1"> <td>Row 1</td> </tr> <tr data-row-id="2"> <td>Row 2</td> </tr> <tr data-row-id="3"> <td>Row 3</td> </tr> </table> - 使用jQuery的
sortable方法使表格行可拖拽排序，并在排序完成后触发回调函数。在回调函数中，获取排序后的行顺序，并将其保存到数据库中。示例代码如下：$(document).ready(function() { $("#myTable").sortable({ update: function(event, ui) { var sortedRows = $(this).find("tr").toArray(); var newOrder = []; sortedRows.forEach(function(row) { newOrder.push($(row).data("row-id")); }); // 将newOrder保存到数据库中 console.log(newOrder); // 在控制台输出新的行顺序 } }); }); - 在回调函数中，将新的行顺序
newOrder发送到后端，通过后端处理将其保存到数据库中。具体的后端实现方式取决于你使用的服务器端编程语言和数据库。
需要注意的是，这里只提供了前端交互和获取新行顺序的部分，具体的后端实现和数据库操作需要根据实际情况进行开发。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云数据库MySQL版、腾讯云云函数（SCF）等。你可以通过腾讯云官网了解更多相关产品和详细介绍。
参考链接：
- jQuery官方文档：https://jquery.com/
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云云函数（SCF）：https://cloud.tencent.com/product/scf
相关·内容
3回答
PHP将可排序列表保存到jQuery数组
php、jquery、jquery-ui、multidimensional-array、foreach
我尝试将一个带有PHP (可排序)的表的顺序保存到一个jQuery数组中。
我对它进行了相当大的简化，但这是它的基本思想。我有一个嵌入了可排序列表的表。该表是通过包含在另一个文件(config.php)中的多维数组的PHP生成的。
config.php：
<?php
$config = array(
"mno" => array('item 5'),
"abc" => array('item 1'),
"ghi" => array('item 3
浏览 0提问于2013-06-22得票数 10
回答已采纳
2回答
jQuery可排序阻止某些项目排序？
jquery、html、jquery-ui、html-table
我有一个使用jQuery UI sortable的HTML表，它可以很好地允许我拖放表中的行顺序。我需要防止某些行被排序。这些行有class ='nosort‘，可以选择。他们总是在最底层。我正在尝试使用sortable的cancel选项来完成此操作，但没有成功。
HTML：
<table id='sort'>
<thead>
<tr>
<td>Col 1</td>
<td>Col 2</td>
浏览 1提问于2014-01-25得票数 5
2回答
UI.Sortable:接收UI.Draggable时的默认位置/索引
javascript、jquery、jquery-ui、jquery-ui-draggable、jquery-ui-sortable
描述
我有两个DataGrids，一个是UI.Sortable，接受来自第二个网格(即UI.Draggable )的行。
我使用receive事件获取网格中删除的新行位置/索引，以执行服务器请求，从而相应地重新排序数据库中的行。
只要我把行放在第一个网格中的现有行之间，这一切都是很好的。当我将一行拖到网格的更远处(网格本身由多个HTML元素和一个包含div标记组成)时，该行将被拖到网格的末尾(这是所需的行为)，但我得到的索引/位置总是'1‘。
代码：
var newItem;
$("#tbl2 tr").draggable({
connectToSortabl
浏览 3提问于2014-06-19得票数 3
回答已采纳
2回答
使用jQuery按列值对正文元素进行排序
javascript、jquery
我正在尝试对一个表进行排序，所以当用户单击表标题时，它将按升序/降序进行排序。到了可以根据列值对表进行排序的地步。但是，我有表行的分组(每个表体两行)，我想根据每个表体第一行的列中的值对列进行排序，但当它对表进行重新排序时，它希望它对表体进行重新排序，而不是对表行进行重新排序。
<table width="100%" id="my-tasks" class="gen-table">
<thead>
<tr>
<th class="sortable"><p
浏览 6提问于2011-05-24得票数 5
回答已采纳
2回答
如何使用ASP.NET UI在jQuery核心中拖放具有数据库更新的行？
jquery、asp.net-mvc、asp.net-core、jquery-ui、asp.net-core-mvc
我使用这个jQuery UI库在ASP.NET Core应用程序中拖放表的行。
script.js
$(function(){
$("#SortTable")
.sortable({ items: "tr.sortable" })
.dragtable({dragHandle: ".dragHandle"})
.tablesorter();
})
cshtml
<div class="table-responsive">
<table class="table"
浏览 13提问于2021-12-15得票数 0
1回答
jquery可排序，禁用在特定项之间的拖放
javascript、jquery、jquery-ui
我的情况如下--我正在对可能包含链接行的表进行排序：
<table>
<tr class="sortable-row"><td>row 1</td></tr>
<tr class="sortable-row"><td>row 2</td></tr>
<tr class="linked-to-previous"><td>row 3</td></tr>
<tr
浏览 0提问于2015-08-12得票数 0
1回答
如何在JQuery中实现表行的序列化
html、jquery
我有这个HTLM和JQuery： JQuery $(document).ready(function() {
//Try to get tbody first with jquery children. works faster!
var tbody = $('#myTable').children('tbody');
//Then if no tbody just select your table
var table = tbody.length ? tbody : $('#myTable');
浏览 17提问于2020-09-07得票数 0
回答已采纳
2回答
如何在单击指向javascript函数的<td>内的锚点时获取<tr>标记中的属性
javascript、jquery、html、ajax
所以我需要一些帮助。
我有一个对sql数据库的查询，它返回一个包含表中所有数据的数组。
然后，我使用一个for将所有数组数据插入到表的行中。
此代码块使用数组中的数据填充表：
for ($i = 0; $i < $size; $i++) {
print ("
<tr>
<td>".$Users[$i][0]."</td>
<td>".$Users[$i][1]."</td>
<td>*****</td>
<td><a href='
浏览 0提问于2015-11-02得票数 0
1回答
带有Jquery的嵌套表行
jquery、html、append、html-table
我正在尝试用Jquery追加Row。但是新行不会产生新行。下面是我设置这个表是一个嵌套表的一个小例子。
<table>
<thead>
<tr>
<th data-sortable="true">Name</th>
<th>Action</th>
</tr>
</thead>
<
浏览 3提问于2016-05-27得票数 0
回答已采纳
1回答
动态排列表格Sikuli的行
java、automation、sikuli
我有一个这样的html页面 <style type="text/css">
body {
font-size: 14px;
}
.drag-handler {
width: 8em;
position: relative;
background-color: #E4E6EB;
background-image: linear-gradient(4
浏览 29提问于2020-07-29得票数 0
回答已采纳
1回答
在加载时对表进行排序，而不仅仅是单击
php、mysql、sorting、html-table、jquery-ui-sortable
我使用Tablesaw，它在单击表标题时对数据进行排序，但是脚本不允许在页面加载时使特定的列可排序。
那么，我的问题是如何使这个表按我想要的列排序呢？
Tablesaw演示：
表
我们也在从数据库中调用数据.这是我们的密码..。
<?php
// Function to create the HTML table using the data stored in the database.
function displayTable($table) {
include "connection.php";
$sql = "
浏览 0提问于2016-01-08得票数 0
回答已采纳
1回答
如何使用javascript或jquery创建动态单击按钮tbody
javascript、html、jquery、dynamic
我有这样的代码：
$(document).ready(function() {
//Try to get tbody first with jquery children. works faster!
var tbody = $('#myTable').children('tbody');
//Then if no tbody just select your table
var table = tbody.length ? tbody : $('#myTable');
$('butto
浏览 1提问于2020-09-07得票数 1
回答已采纳
1回答
Java脚本表对数值排序
javascript、html、numeric、alphabetical、sorttable.js
脚本给出了错误的数值结果，我如何修复它，使其同时适用于数字和字母表？ 下面是我使用的javascript function sortTableByColumn(table, column, asc = true) {
const dirModifier = asc ? 1 : -1;
const tBody = table.tBodies[0];
const rows = Array.from(tBody.querySelectorAll("tr"));
// Sort each row
const sortedRows = ro
浏览 22提问于2020-11-24得票数 1
回答已采纳
1回答
如何排序数组中的元素: jQuery
javascript、jquery、arrays、jquery-ui
摘要：我有一个表，其中为每单击一次添加行。我使用()函数移动/排序行。
假设我有这个：
<tbody>
<tr><td>A</td></tr>
<tr><td>B</td></tr>
<tr><td>C</td></tr>
<tr><td>D</td></tr>
<tr><td>E</td></tr>
<tr>
浏览 2提问于2015-07-14得票数 1
回答已采纳
2回答
jQuery UI可排序的序列化方法或toarray方法-需要通知
jquery、jquery-ui
我一直在看
一天的大部分时间。我想用新的值来更新数据库，这是大多数人想要的。在使用ASP.NET时，我的想法是使用序列化将新值发送到更新数据库的页面。下面是脚本：
<script type="text/javascript">
jQuery(function() {
$("#sortable").sortable();
$("#sortable").disableSelection();
});
jQuery(function() {
$("#sortable li:lt(3)
浏览 2提问于2010-06-30得票数 3
回答已采纳
1回答
引导网格数据行id未定义
jquery、jquery-bootgrid
我在Bootgrid表上有编辑和删除控件。这些都需要数据行号，但是数据属性是未定义的，正如您在下面的行中看到的那样。在文档中找不到与此相关的任何内容。
这里的编辑器坚持认为我没有足够的文本来满足代码的数量，所以我会发布更多的文本以便提交。真的没什么可说的了。我可以花时间研究一下引导网格代码或BootStrap代码来解决问题，但我希望以前有人也经历过这种情况。我在Stackoverflow上没有发现类似的问题，也没有在Web上的任何其他地方找到类似的问题。
<div class="Wrapper">
<div class="CenterTube&
浏览 5提问于2020-04-27得票数 0
1回答
使用.NET可排序重新排序后如何将JQuery Gridview行顺序保存到数据库
c#、jquery、.net、jquery-ui、jquery-ui-sortable
我有一个数据库表，其中包含两个字段，ColumnName和SortOrder。
我使用网格视图在C# .NET web应用程序的页面上显示.NET字段。
我希望用户能够通过拖动和删除网格视图行重新排序，然后通过将新的行号插入DB表中的SortOrder字段将这个新顺序保存到数据库中。
我已经设法使拖放特性使用JQueryUI Sortable工作。但是，我很难获得行服务器端的新顺序，这样我就可以将其输入数据库。
Gridview代码
<asp:GridView ID="GV_ColumnNames" runat="server" CssClass="
浏览 3提问于2017-02-15得票数 0
2回答
使用jquery函数对html表中的dd/mm/yyyy格式的日期进行排序
javascript、jquery、html、sorting、date
我有一个HTML表，其中一列是date values.How，用于在第一次单击时按降序排序，在第二次单击时按升序排序，同时单击列标题Date
function getVal(elm, n) {
var v = $(elm).find('td').eq(n).text().toUpperCase();
var num = v.split(/ /)[0].replace(/[^\d]/g, '')
num = parseFloat(num);
if ($.isNumeric(num)) {
v = parseInt(num, 10);
浏览 3提问于2018-01-31得票数 2
1回答
如何将可排序单元格添加到没有其他可排序项的表行？
jquery、html-table、jquery-ui-sortable
试图使用JQuery使用可排序单元格生成表。所面临的问题是，当行中没有可排序的单元格时，就不可能将单元格移动到其中。Im曾尝试添加不可见的可排序单元格(到第一行)，但这并没有帮助。
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<table>
<tbody>
<tr>
<td class="ui-state-disabled"></td
浏览 3提问于2018-01-08得票数 0
回答已采纳
3回答
使用php和MySql保存可排序列表的顺序
php、mysql、jquery-ui
我有一个可以用jQuery ui排序的列表。我能够安全地保护用户所做的更改，并将其存储在var $order中。我的问题是，我不知道如何将其保存在MySql数据库中。如何确保MySql表中的订单安全？(请从最基本的角度解释，我只是在学习php)
HTMLindex.html：
<ul id="sortable">
<li id="1">item1</li>
<li id="2">item2</li>
<li id="3">item3&l
浏览 6提问于2014-07-18得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
