Question

我有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"> 当我点击与该行对应的<a class="Remove">时删除一行。

我尝试如下：

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

    });
});
</script>

但是点击超链接时，文本“.sample”会写入表格。我该怎么办？

Answer 1

尝试：

＆＃13;

$('a.Clone').click(function () {
    $('tr.Sample:last').clone().appendTo('#shipping');
})
$('#shipping').on('click', 'a.Remove:gt(0)', function () {
    $(this).closest('tr').remove();
})

＆＃13;

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

＆＃13;

＆＃13; 第一部分克隆输入并将其附加到表中。第二部分处理删除行（离开顶行）。

Answer 2

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>

Answer 3

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

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();    
    }

Hopre有帮助。

Answer 4

我刚刚为你写了一个剧本

$( 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');
});    


});

try this fiddle

动态地将一个示例行添加到表中

4 个答案: