javascript - 单击表 td 输入时每次都附加相同的 tr

Question

当我单击 td 元素时，我在 JavaScript 中遇到问题，无法重复相同的 tr。 我的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 .