使用jQuery交换表行，并将新行顺序保存在数据库中，以便在离开页面时获得相同的顺序
使用jQuery交换表行，并将新行顺序保存在数据库中，以便在离开页面时获得相同的顺序
提问于 2017-01-17 14:16:36
我有一个要求，我需要交换的链接点击表行。我使用了下面的jquery和html代码来上下交换行。
我的表最终是这样的：
<html>
<head>
<title>Swap table rows using Jquery</title>
<script src="http://code.jquery.com/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".up,.down,.top,.bottom").click(function(){
var row = $(this).parents("tr:first");
if ($(this).is(".up")) {
row.insertBefore(row.prev());
} else if ($(this).is(".down")) {
row.insertAfter(row.next());
} else if ($(this).is(".top")) {
row.insertBefore($("table tr:first"));
}else {
row.insertAfter($("table tr:last"));
}
});
});
</script>
</head>
<body>
<table>
<tr>
<td>One</td>
<td>
<a href="#" class="up">Up</a>
<a href="#" class="down">Down</a>
<a href="#" class="top">Top</a>
<a href="#" class="bottom">Bottom</a>
</td>
</tr>
<tr>
<td>Two</td>
<td>
<a href="#" class="up">Up</a>
<a href="#" class="down">Down</a>
<a href="#" class="top">Top</a>
<a href="#" class="bottom">Bottom</a>
</td>
</tr>
<tr>
<td>Three</td>
<td>
<a href="#" class="up">Up</a>
<a href="#" class="down">Down</a>
<a href="#" class="top">Top</a>
<a href="#" class="bottom">Bottom</a>
</td>
</tr>
<tr>
<td>Four</td>
<td>
<a href="#" class="up">Up</a>
<a href="#" class="down">Down</a>
<a href="#" class="top">Top</a>
<a href="#" class="bottom">Bottom</a>
</td>
</tr>
<tr>
<td>Five</td>
<td>
<a href="#" class="up">Up</a>
<a href="#" class="down">Down</a>
<a href="#" class="top">Top</a>
<a href="#" class="bottom">Bottom</a>
</td>
</tr>
</table>
</body>
</html>但我的问题是，一旦你离开页面，这并不会保存行的顺序，而不是每次交换行时都这样做，我想在按下“保存”按钮或某个链接时保存一次表。这有可能实现吗？
回答 1
Stack Overflow用户
发布于 2017-01-17 15:17:01
您可以像这样使用localStorage而不是数据库：
$(document).ready(function() {
if (localStorage.td != null) {
var obj = JSON.parse(localStorage.td)
$('table tr td:first-child').each(function(i) {
$(this).text(obj[i])
})
}
$(".up,.down,.top,.bottom").click(function() {
var row = $(this).parents("tr:first");
if ($(this).is(".up")) {
row.insertBefore(row.prev());
} else if ($(this).is(".down")) {
row.insertAfter(row.next());
} else if ($(this).is(".top")) {
row.insertBefore($("table tr:first"));
} else {
row.insertAfter($("table tr:last"));
}
});
$("button").click(function() {
var obj = {};
$('table tr td:first-child').each(function(i) {
obj[i] = $(this).text()
})
localStorage.td = JSON.stringify(obj);
console.log(localStorage.td)
})
});请在此处查看我的Plunker以获取工作副本：https://plnkr.co/edit/jMZ2m9NssPu9ZXPvwXGR?p=preview
如果您重新排列您的元素并单击保存，然后重新加载页面，您将看到一切都像您保存它一样。
如果您像这样重新排列代码，您还可以动态地使用save功能：
$(document).ready(function() {
var obj = {}
if (localStorage.td != null) {
obj = JSON.parse(localStorage.td)
$('table tr td:first-child').each(function(i) {
$(this).text(obj[i])
})
}
$(".up,.down,.top,.bottom").click(function() {
var row = $(this).parents("tr:first");
if ($(this).is(".up")) {
row.insertBefore(row.prev());
} else if ($(this).is(".down")) {
row.insertAfter(row.next());
} else if ($(this).is(".top")) {
row.insertBefore($("table tr:first"));
} else {
row.insertAfter($("table tr:last"));
}
$('table tr td:first-child').each(function(i) {
obj[i] = $(this).text()
})
localStorage.td = JSON.stringify(obj);
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41690196
复制相关文章
相似问题
腾讯云开发者
