Question

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

＆＃13;

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

＆＃13;

如果给出codepen示例，我将不胜感激。

Answer 1

您可能尝试使用

实现此目的

.droppable

Check this

Jsfiddle

Answer 2

应该是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来获取行。

祝你好运！

Answer 3

$(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>

在这个例子中看到我的代码。我认为这对你和其他朋友来说是完全有用的。

如何使用javascript

3 个答案: