Question

使用jQuery，我需要通过从table1拖动到table2来一次复制一行，在table1中保持行不变。在table2中删除时，我需要在table2中删除的行中添加2个新列。需要在table2中拖放行以重新排列它们。 OK将新数据列添加到table2以发送到服务器。以下代码有效。问题是如果在鼠标移到table2之前发生了丢弃，则会将列添加到table1。代码如下：

<!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>

jQuery使用添加的td列将一行从一个表克隆到另一个表

0 个答案: