如何生成序列 ID 并向上或向下移动表行并动态调整每行的序列 ID？
[英]How to generate sequence id and move table rows up or down and dynamically adjusting each row's sequence ID?
问题描述
1.我有两个表table1和table2，当你点击添加按钮时，它会将检查的行从table1移动到table2。 当内容从 table1 添加到 table2 时，我必须从上到下生成一个从 1 到 n 的序列 ID。 当我将行从 table1 移动到 table2 时，如何生成这个序列 ID？
2.其次，我必须分别使用 UP 和 DOWN 按钮来上下移动 table2 中的行。 问题是我需要根据表行移动到的位置来更改序列值。 例如：如果我将 row 向下移动 1 行，则序列值必须从 1 变为 2。但是，第一行的序列值需要从 2 变为 1，因此始终保持从 1 到 n 的序列顺序，无论如何移动行。
任何想法将不胜感激。
这是jsp：
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Insert title here</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#add').on("click", function(){
$('#one tbody input:checked').parent().parent().clone().appendTo("#two tbody");
return false;
});
$('#remove').on("click", function(){
$('#two tbody input:checked').parent().parent().remove();
return false;
});
$(".up,.down").click(function(){
var row = $('#two tbody input:checked').parents("tr:first");
if ($('#two tbody input:checked').is(".up")) {
row.insertBefore(row.prev());
} else {
row.insertAfter(row.next());
}
//return false;
});
});
</script>
</head>
<body>
<table id="one" style="border:1px solid red;">
<caption>Table 1</caption>
<thead>
<tr>
<th></th>
<th >ID</th>
<th> Name</th>
<th>System</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>12</td>
<td>Sam</td>
<td>FSS</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>87</td>
<td>Harry</td>
<td>MSS</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>23</td>
<td>Rita</td>
<td>MVV</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>65</td>
<td>Tom</td>
<td>RDD</td>
</tr>
</tbody>
</table>
<table id="two" style="border:1px solid green;">
<caption>Table 2</caption>
<thead>
<tr>
<th></th>
<th >ID</th>
<th>Sequence No</th>
<th>Name</th>
<th>System</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<br><hr><br>
<button id="add">Add</button>
<button id="remove">Remove</button>
<button class="up">UP</button>
<button class="down">DOWN</button>
</body>
</html>
还有一件事，当我点击向上或向下按钮时，选中的行只会向下移动，不知道为什么？
2 个解决方案
解决方案1
1 2013-06-12 15:34:31
你可以这样做：
$('#add').on("click", function(){
var clone=$('#one tbody input:checked').parent().parent().clone();
clone.each(function(){
$(this).appendTo("#two tbody").attr("id",$(this).index());
});
return false;
});
$('#remove').on("click", function(){
$('#two tbody input:checked').parent().parent().remove();
$('#two tbody tr').each(function(){
$(this).attr("id",$(this).index());
});
return false;
});
$(".up,.down").click(function(){
var row = $('#two tbody input:checked').parent().parent();
if ($(this).is(".up")) {
row.each(function(){
var previndex=$(this).prev().index();
if(previndex>=0){
var rowindex=$(this).index();
$(this).attr("id",previndex);
$(this).prev().attr("id",rowindex);
$(this).insertBefore($(this).prev());
}
});
} else {
$(row.get().reverse()).each(function(){
var nextindex=$(this).next().index();
if(nextindex>=0){
var rowindex=$(this).index();
$(this).attr("id",nextindex);
$(this).next().attr("id",rowindex);
$(this).insertAfter($(this).next());
}
});
}
});
解决方案2
1 2013-06-12 17:38:57
我试图尽可能地注释代码以解释发生了什么：
jQuery(function($) {
var tableOne = $('#one'),
tableTwo = $('#two'),
sequenceIndex = $('.sequence').index(),
moved = [];
function addChecked(e) {
tableOne.find(':checked').each(function() {
var row = $(this).closest('tr'),
clone;
// check if the row we're trying to
// move has already been moved
if ($.inArray(row[0], moved) < 0) {
// cache this row so we
// know it's been moved
moved.push(row[0]);
// clone and append to table2.
// store original row as data
// so that we can remove from
// cache when rows are removed
clone = row.clone()
.data('orig', row[0])
.appendTo(tableTwo.find('tbody'));
// because table1 doesn't have the same
// number of columns as table2 we have to
// create an extra column within the row
// to hold the sequence num
$('<td/>').insertAfter(clone.find('td').eq(sequenceIndex-1));
}
});
updateSequence();
e.preventDefault();
}
function removeChecked(e) {
tableTwo.find(':checked').each(function() {
var row = $(this).closest('tr'),
// get the index of this row within the cache
position = moved.indexOf(row.data('orig'));
// remove this row from the cache
moved.splice(position, 1);
// remove this row from the DOM
row.remove();
});
updateSequence();
e.preventDefault();
}
function moveUpDown(e) {
var button = $(this),
isUp = button.hasClass('up'),
rows = tableTwo.find(':checked').closest('tr');
if (!isUp) {
// if we're going down we need to
// reverse the row array so that the
// rows don't just switch around
Array.prototype.reverse.call(rows);
}
rows.each(function() {
var checked = $(this),
nextPrev = checked[isUp ? 'prev' : 'next']();
// move the row
if (nextPrev.length) {
checked[isUp ? 'insertBefore' : 'insertAfter'](nextPrev);
}
});
updateSequence();
e.preventDefault();
}
function updateSequence() {
tableTwo.find('tr').each(function() {
var row = $(this),
sequence = row.index()+1;
row.find('td').eq(sequenceIndex).text(sequence);
});
}
$('#add').on('click', addChecked);
$('#remove').on('click', removeChecked);
$('.up, .down').on('click', moveUpDown);
});
我还必须稍微修改 HTML。 我刚刚在 Sequence Num 表头中添加了一个.sequence类。 你可以在这里看到这个工作：http: //jsbin.com/ocesop/1/edit
用生成表 <divs> 每行应包含同一组html元素，但具有唯一的ID？
[英]Generate a table with <divs> where each row should contains same set of html elements but with unique id's?
动态插入/删除表行（包括如何为添加的行提供ID）
[英]Dynamically insert/remove table rows (including how to give ID's to added rows)
jQuery / JavaScript：为表中的每一行避免唯一的ID？
[英]jQuery/JavaScript: Avoid unique ID's for each row in a table?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.