Jquery ui jQuery使用添加的td列将克隆行从一个表复制到另一个表
使用jQuery，我需要复制行，一次一行，从表1拖动到表2，保持表1中的行不变。在放入表2中时，我需要向放入表2中的行添加2个新列。需要在表2中拖放这些行以重新排列它们。OK向表2中添加了一个新的数据列，用于发送到服务器。 下面的代码可以工作。问题是，如果在鼠标悬停在表2上之前进行拖放，则会将列添加到表1中。 代码如下：Jquery ui jQuery使用添加的td列将克隆行从一个表复制到另一个表,jquery-ui,copy,rows,jquery-ui-sortable,Jquery Ui,Copy,Rows,Jquery Ui Sortable,使用jQuery，我需要复制行，一次一行，从表1拖动到表2，保持表1中的行不变。在放入表2中时，我需要向放入表2中的行添加2个新列。需要在表2中拖放这些行以重新排列它们。OK向表2中添加了一个新的数据列，用于发送到服务器。 下面的代码可以工作。问题是，如果在鼠标悬停在表2上之前进行拖放，则会将列添加到表1中。 代码如下： <!doctype html> <html lang="en"> <head> <meta charset='utf-8'>
<!doctype html>
<html lang="en">
<head>
<meta charset='utf-8'>
<!--
<link rel='stylesheet' href='style/jquery-ui.css'>
-->
<script src='js/jquery-1.11.0.min.js'></script>
<script src='js/jquery-ui.min.js'></script>
<style type="text/css">
.tables_ui {
display:inline-block;
margin:2px 2%;
border:2px solid #3333fe;
border-spacing:0;
}
.tables_ui ul li {
min-width: 200px;
}
.dragging li.ui-state-hover {
min-width: 240px;
}
.dragging .ui-state-hover a {
color:green !important;
font-weight: bold;
}
.tables_ui th,td {
text-align: left;
padding: 2px 4px;
border: 1px solid;
}
.connectedSortable tr, .ui-sortable-helper {
cursor: move;
}
.connectedSortable tr:first-child {
cursor: default;
}
.ui-sortable-placeholder {
background: yellow;
}
.ui-layout-center {
width: 400px;
height: 300px;
border: 1px solid black;
}
.ui-state-hover {
background-color: #f9ffff;
}
</style>
<script>
function dorows() {
$('#sortable2').find('tr').each(function(index){
if (index > 0) {
$('#sortable2 tr').eq(index).find('td').eq(5).remove(); //Remove data column if exists
var valID = $('#sortable2 tr').eq(index).find('td').eq(2).html();
var valNext = $('#sortable2 tr').eq(index).find('input').val();
$(this).append("<td><input style='cursor: default;' name='namedata' value='" + index + '~' + valID + '~' + valNext + "' /></td>");
}
});
}
$(document).ready(function() {
$("#sortable1").sortable({
connectWith: ".connectedSortable",
helper: function (e, tr) {
this.copyHelper = tr.clone().insertAfter(tr);
$(this).data('copied', false);
$(this).find('tr').each(function(index){
});
tr.append("<td><input style='cursor: default;' value='0' /></td>");
tr.append("<td><a style='cursor: default;' onclick='deleterow($(this));'>Delete</a></td>");
return tr.clone();
},
stop: function () {
var copied = $(this).data('copied');
if (copied) {
$('#initial').remove(); //Remove initial row
}
if (!copied) {
this.copyHelper.remove();
}
this.copyHelper = null;
}
});
$("#sortable2").sortable({
receive: function (e, ui) {
ui.sender.data('copied', true);
}
});
//To add order number of rows as text
$( "#sortable2" ).sortable({ //Only done when table2 is reearranged
stop: function( event, ui ){
$(this).find('tr').each(function(index){
});
}
});
$('form').on('submit', function (e) {
e.preventDefault();
});
});
function deleterow(row) {
row.closest('tr').remove();
}
</script>
</head>
<body>
<table class="tables_ui">
<caption><h4>Existing names</h4></caption>
<tbody id="sortable1" class="connectedSortable">
<tr>
<th>Number</th>
<th>Name</th>
<th>ID</th>
</tr>
<tr>
<td>S03</td>
<td>Name3</td>
<td>ID4</td>
</tr>
<tr>
<td>S01</td>
<td>Name1</td>
<td>ID2</td>
</tr>
<tr>
<td>S02</td>
<td>Name2</td>
<td>ID6</td>
</tr>
</tbody></table>
<table class="tables_ui">
<caption><h4>When names are arranged in order to create a sequence, enter the time to the previous name in minutes. Then click OK.</h4></caption>
<tbody id="sortable2" class="connectedSortable">
<tr>
<th>Number</th>
<th>Name</th>
<th>ID</th>
<th>Time in minutes to previous name</th>
<th>Delete</th>
</tr>
<tr id='initial'>
<td colspan='5' style='width: 300px;'>Drop and rearrange names here</td>
</tr>
</tbody>
</table>
<form>
<input type='submit' value='OK' onclick='dorows();' />
</form>
</body>
</html>
.tables_ui{
显示：内联块；
利润率：2×2%；
边框：2px实心#3333fe；
边界间距：0；
}
.tables_ui ul li{
最小宽度：200px；
}
.拖动li.ui-state-hover{
最小宽度：240px；
}
.拖动.ui状态悬停a{
颜色：绿色！重要；
字体大小：粗体；
}
.表_uith，td{
文本对齐：左对齐；
填充物：2px4px；
边框：1px实心；
}
.connectedSortable tr、.ui可排序帮助程序{
光标：移动；
}
.connectedSortable tr：第一个孩子{
游标：默认值；
}
.ui可排序占位符{
背景：黄色；
}
.ui布局中心{
宽度：400px；
高度：300px；
边框：1px纯黑；
}
.ui状态悬停{
背景色：#f9ffff；
}
函数dorows（）{
$（'#sortable2'）。查找（'tr'）。每个（函数（索引）{
如果（索引>0）{
$（'#sortable2 tr'）.eq（index）.find（'td'）.eq（5）.remove（）；//删除数据列（如果存在）
var valID=$（'#sortable2 tr'）.eq（index.find（'td'）.eq（2.html（）；
var valNext=$（'#sortable2 tr'）.eq（index.find（'input'）.val（）；
$（此）。追加（“”）；
}
});
}
$（文档）.ready（函数（）{
$（“#可排序1”）。可排序({
connectWith:“.connectedSortable”，
助手：函数（e，tr）{
this.copyHelper=tr.clone（）.insertAfter（tr）；
$（此）.data（'copied'，false）；
$（this）.find（'tr'）.each（函数（索引）{
});
tr.append（“”）；
tr.append（“删除”）；
返回tr.clone（）；
},
停止：函数（）{
var copied=$（this）.data（'copied'）；
如果（复制）{
$（'#initial'）.remove（）；//删除初始行
}
如果（！已复制）{
this.copyHelper.remove（）；
}
this.copyHelper=null；
}
});
$（“#可排序2”）。可排序({
接收：功能（e、ui）{
ui.sender.data（'copied'，true）；
}
});
//以文本形式添加订单行数的步骤
$（“#sortable2”）。可排序（{//仅在重新排列表2时执行
停止：功能（事件、用户界面）{
$（this）.find（'tr'）.each（函数（索引）{
});
}
});
$（'form'）。关于（'submit'，函数（e）{
e、 预防默认值（）；
});
});
函数deleterow（行）{
行。最近（'tr'）。删除（）；
}
现有名称
数
名称
身份证件
S03
名字3
ID4
S01
名称1
ID2
S02
姓名2
ID6
为创建序列而排列名称时，请以分钟为单位输入上一个名称的时间。然后单击OK。
数
名称
身份证件
前一个名称的时间（分钟）
删除
在此处删除并重新排列名称