如何使用javascript将内容从表的一行移动到另一行

How to move content from one row of the table to another table row using javascript

本文关键字：一行 移动 javascript 何使用      更新时间：2023-09-26

我有两个表。表1和表2。我想复制一行内容到另一行时，点击行而不是按钮，使用java-script。 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("t1").clone().appendTo("t2");
    });
});
</script>
</head>
<body>
 <table style="width:100%;border-style:dashed">
  <tr1>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr1>
  
</table> 
</br>
<table style="width:100%;border-style:dashed">
  <tr2>
    <th></th>
    <th></th>
    <th></th>
  </tr2>
  
</table>
<button>colne</button>
</body>
</html>

如果能给出相互依存的例子，我将不胜感激。

您可以尝试使用

来实现这一点
.droppable

检查这个

Jsfiddle 

$(document).ready(function() {
                var items = [];
                $("#myTable tr").on("click", function() {
                    var newTr = $(this).closest("tr").clone();
                    var newButtonHTML = "<input type = 'button' value='Edit' onclick='Edit()' /><input type='button' value='Delete' onclick='deleteRow(this.parentNode.parentNode.rowIndex)'/>";
                    $(newButtonHTML).children("button").click(function(e) {
                    });
                    $(newTr).children("td:last").html("").html(newButtonHTML);
                    items.push(newTr);
                    newTr.appendTo($("#stopsTable"));
                });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div style="height: 700px;width: 100%;overflow: auto; float: left;">
            <table id="myTable" border="1px" style="width: 24%; font-size: 10px; float :left;" >
                <thead>
                    <tr>
                        <th>S No</th>
                        <th>Stop Name</th>
                        <th>Longitude</th>
                        <th>Latitude</th>
                        <th>ETA</th>
                        <th>Status</th>
                     
                    </tr>
                </thead>
                <tbody>
                    <tr  >
                        <td >1</td>
                        <td>The Indian Heights School</td>
                        <td>28.56137</td>
                        <td>77.05249</td>
                        <td>06:06:12</td>
                        <td>Ignition_On</td>
            
                    </tr>
                    <tr  >
                        <td >2</td>
                        <td>The Indian Heights School</td>
                        <td>28.56136</td>
                        <td>77.05246</td>
                        <td>06:06:23</td>
                        <td>Ignition_On</td>
                   
                    </tr>
                    <tr  >
                        <td >3</td>
                        <td>The Indian Heights School</td>
                        <td>28.56135</td>
                        <td>77.05242</td>
                        <td>06:06:31</td>
                        <td>Start</td>
                 
                    </tr>
                    <tr  >
                        <td >4</td>
                        <td>The Indian Heights School</td>
                        <td>28.56139</td>
                        <td>77.05245</td>
                        <td>06:06:41</td>
                        <td>Ignition_On</td>
                       
                    </tr>
                </tbody>
    </table>
    
      <table id="stopsTable" border="1px" style="width: 24%; margin-left: 10px; font-size: 10px; float :left;">
                <thead>
                    <tr>
                        <th>S No</th>
                        <th>Stop Name</th>
                        <th>Longitude</th>
                        <th>Latitude</th>
                        <th>ETA</th>
                        <th>Status</th>
                      
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>

看看我的代码在这个例子中，我想它会对你和其他朋友有帮助。

应该是一个简单的jquery dom操作，考虑如下:

<table id="first-table">
  <tbody>
    <tr class="row-copier"><td>Content here</td><td>other content</td></tr>
    <tr class="row-copier"><td>more content</td><td>second column</td></tr>
    <tr class="row-copier"><td>...and something completely different</td><td><h1>YAY!</h1></td></tr>
  </tbody>
</table>
<table id="second-table">
  <tbody>
    <tr><td>Result Table</td><td>where stuff will get copied</td></tr>
  </tbody>
</table>
<script>
jQuery(function($) {
  $('.row-copier').click(function() {
    // select row-copier row, clone it, and append to second table body
    $(this).clone().appendTo('#second-table>tbody');
  });
});
</script>

重要的位是clone操作，用于进行深度复制，appendTo用于指定克隆副本的放置位置。我编辑了答案，以反映您希望复制行点击行本身的任何地方，因此不需要链接，也不需要closest来获取行。

祝你好运!

相关文章：