jquery - 我的表中的重复行

Question

我在将一行复制到我的表中时遇到问题。

我想复制我的下表行：

<table class="table table-bordered table-striped">
  <tr>
    <th>Service</th>
    <th>Début</th>
    <th>Fin</th>
    <th>État</th>
    <th>&nbsp;</th>
  </tr>
  <tr class="tr_clone">
    <td>&nbsp;</td>
    <td><span class="controls">
      <input class="placeholder span2 datepicker" type="text" value="" data-date-format="yyyy-mm-dd">
      </span></td>
    <td><span class="controls">
      <input class="placeholder span2 datepicker" type="text" value="" data-date-format="yyyy-mm-dd">
      </span></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<p><a href="#" class="tr_clone_add">Ajouter une ligne</a></p>

使用此 Js 代码：

$(".tr_clone_add").live('click', function() {
    var $tr    = $('table').closest('.tr_clone');
    var $clone = $tr.clone();
    $clone.find(':text').val('');
    $tr.after($clone);
});

但它不起作用。

你能帮我处理这个案子吗？

谢谢。

Answer 1

用这个

  $(function(){
$(".tr_clone_add").live('click', function() {
    var $tr    = $('table').find('.tr_clone').first();
    var $clone = $tr.clone();
    $clone.find(':text').val('');
    $tr.after($clone);
});
});

你不需要

 var $tr    = $('table').closest('.tr_clone');

编辑：如果想在每个表中添加重复的行，那么试试这个

     $(function(){
    $(".tr_clone_add").live('click', function() {
        $('table').each(function(i,v){
        var $tr    = $(this).find('.tr_clone').first();
        var $clone = $tr.clone();
        $clone.find(':text').val('');
        $tr.after($clone);
        })

    });
    });

Answer 2

$(function () {
        // Add Row
        $('#table-data').on('click', ".tr_clone_add", function (e) {
            var cloned = $('#table-data tr:last').clone();
            e.preventDefault();
            cloned.clone().appendTo('#table-data');
        });
        // Del Row
        $('#table-data').on('click', ".tr_clone_del", function (e) {
            e.preventDefault();
            $(this).closest('tr').remove();
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<table id="table-data" class="table table-hover table-bordered">
    <tbody>
        <tr>
            <td><b>TUTORS</b></td>
        </tr>            
        <tr class="tr_clone">
            <td>
                <div class="col-md-6">
                    colum1
                </div>
                <div class="col-md-6">
                    colum2
                    <input type="button" class="btn btn-primary btn-xs tr_clone_add" name="add" value="Add" />
                    <input type="button" class="btn btn-danger btn-xs tr_clone_del"  name="del" value="Del" />
                </div>
            </td>
        </tr>        
    </tbody>
</table>