在點擊表td輸入每次追加相同的tr

Question

我有一個問題，在JavaScript重複同一個tr後，當我點擊td元素。 我的HTML代碼波紋管：

<table id="tabl2" class="table time-table table-bordered table-striped budrow"> 
<thead> 
    <tr> 
     <th class="cal-head">Rates</th> 
     <th class="cal-head">Start date</th> 
     <th class="cal-head">End date</th> 
    </tr> 
</thead> 
<tr> 
    <td> 
     <input type="number" readonly placeholder="Rates"> 
    </td> 
    <td> 
     <input type="text" readonly id="start" placeholder="Start date"> 
    </td> 
    <td> 
     <input type="text" class="datepicker" name="enddate" placeholder="End date"> 
    </td> 
</tr> 

我試着用這個JS，但失敗：

$('.budrow').click(function(){ 
    $(this).find('tr').append('<tr> <td></td> <td></td> <td></td> </tr>'); 
}); 

請幫助我。

Answer 1

嘗試使用：

var $table = $('#tabl2'); 
$table.click(function(e){ 
    var $tr = $(e.target).closest('tr'); 
    if (($tr.parent().prop("tagName") != 'THEAD') && $tr.is(":last-child")) 
     $tr.after($tr.clone()); 
}); 

JSFiddle。

Answer 2

綁定click事件所點擊的元素，使用closest()選擇當前行，然後使用after()功能追加新的行：

$('.btn').on('click', function() { 
 
    var that = $(this); 
 
    var newRow = '<tr><td colspan="3">This is a new row</td></tr>'; 
 
    that.closest('tr').after(newRow); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <button class="btn">click</button> 
 
     </td> 
 
     <td> 
 
     <button class="btn">click</button> 
 
     </td> 
 
     <td> 
 
     <button class="btn">click</button> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 3

您可以克隆，然後添加新行，也可以單獨使用添加按鈕更好

<button class="budrow">Add</button> 
<table id="tabl2" class="table time-table table-bordered table-striped budrow"> 
    <thead> 
     <tr> 
      <th class="cal-head">Rates</th> 
      <th class="cal-head">Start date</th> 
      <th class="cal-head">End date</th> 
     </tr> 
    </thead> 
    <tr> 
     <td> 
      <input type="number" readonly placeholder="Rates" /> 
     </td> 
     <td> 
      <input type="text" readonly id="start" placeholder="Start date" /> 
     </td> 
     <td> 
      <input type="text" class="datepicker" name="enddate" placeholder="End date" /> 
     </td> 
    </tr> 
</table> 

然後

jQuery(function ($) { 
    var $tr = $('#tabl2 tbody tr').eq(0); 
    $('button.budrow').click(function() { 
     var $clone = $tr.clone(); 
     $('#tabl2').append($clone); 
     $clone.find('.datepicker').removeClass('hasDatepicker').datepicker(); 
    }); 
    $('.datepicker').datepicker(); 
}); 

演示：Fiddle

Answer 4

$('.budrow tbody input').click(function(e){ 
     makeClone(e); 
    }); 

    function makeClone(e){ 
     var newClone = $(e.target).closest("tr").clone(); 
     $("#tabl2 tbody").append(newClone); 
     $(newClone).click(function(ev){ 
      makeClone(ev); 
     }) 
    }