将示例行动态添加到表中

Add a sample row to a table dynamically

本文关键字：添加 动态      更新时间：2023-09-26

我有一个table，如下所示：

<table id="shipping">
   <tr class="Sample">
     <td>
       <input type="text">
     </td>
     <td>
        <a class="Remove">Remove</a>
    </td>
   </tr>
</table>

我有一个超链接：

<a class="Clone">Add</a>

我需要做的是每次点击时将<tr class="Sample">添加到表中

<a class="Clone">并且当我点击对应于该行的CCD_ 4时移除该行。

我尝试了如下：

<script>
 $(document).ready(function(){
    $('.Clone').click(function(){
           $('#shipping').append('.Sample');    
    });
});
</script>

但单击超链接后，文本".sample"就会写入表中。我该怎么做？

尝试：

$('a.Clone').click(function () {
    $('tr.Sample:last').clone().appendTo('#shipping');
})
$('#shipping').on('click', 'a.Remove:gt(0)', function () {
    $(this).closest('tr').remove();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="shipping">
    <tr class="Sample">
        <td>
            <input type="text">
        </td>
        <td> <a class="Remove">Remove</a>
        </td>
    </tr>
</table> <a class="Clone">Add</a>
第一部分克隆输入并将其附加到表中。第二部分处理删除行（保留最上面的行）。

单击添加按钮时调用此函数：

function myAddFunction(){
   var html = "<tr class=Sample><td><input type=text></td><td><a class=Remove>Remove</a></td></tr>"
   $('#shipping').append(html);
}

点击删除按钮时调用此函数：

    function myRemoveFuncion(){
       $(this).closest('tr').remove();    
    }

希望有帮助。

我刚刚为你写了一个脚本

$( document ).ready(function() {
$(".Remove").on("click", function() {
    $(this).parent().parent().remove();
});
$(".Clone").on("click", function() {
var row = $('#shipping tr:last').clone(true);
row.insertAfter('#shipping tr:last');
});    

});

试试这个小提琴

JS:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
    $(function(){
    $('#shipping').on('click', 'a.Clone', function(e){ 
     e.preventDefault();      
     $('table#shipping').append( $(this).closest('tr').clone() );
    });
    $('#shipping').on('click', 'a.Remove', function(e){ 
      e.preventDefault(); 
      $(this).closest('tr').remove(); 
     });
    });
    </script>

HTML:

<table id="shipping">
   <tr class="Sample">
     <td>
       <input type="text">
     </td>
     <td>
        <a class="Clone" href="#">Clone</a>
        <a class="Remove" href="#">Remove</a>
    </td>
   </tr>
</table>
相关文章：