javascript - 使用按钮 jquery 添加新行然后删除按钮

Question

我正在尝试创建一个具有“添加”按钮的表格，以在每个新行中添加新行，然后删除上一个按钮。我有这样的代码。

 $("#insert-more").click(function () {
        $("#mytable").each(function () {
            var tds = '<tr>';
            jQuery.each($('tr:last td', this), function () {
                tds += '<td>' + $(this).html() + '</td>';
            });
            tds += '</tr>';
            if ($('tbody', this).length > 0) {
                $('tbody', this).append(tds);
            } else {
                $(this).append(tds);
            }
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable" class="table table-hover table-striped">
       <thead>
         <th>Check</th>
         <th>Nama Klien</th>
         <th>Nama File</th>
         <th>Ukuran</th>
         <th>Bahan</th>
         <th>Jumlah</th>
         <th></th>
        </thead>
        <tbody>
         <tr>
          <td>
            <label class="checkbox">
              <input type="checkbox" value="" data-toggle="checkbox">
            </label>
          </td>
          <td>
           <select class="form-control">
             <option value="default">KLIEN :</option>
             <option value="default">ELV</option>
             <option value="default">ZYTA</option>
             <option value="default">LOUSALUNA</option>
             <option value="default">MYLADY</option>
            </select>
           </td>
           <td>
            <select class="form-control">
             <option value="default">FILES :</option>
             <option value="default">TWOTONE 1</option>
             <option value="default">TWOTONE 1</option>
             <option value="default">TWOTONE 1</option>
             <option value="default">TWOTONE 1</option>
             <option value="default">TWOTONE 1</option>
            </select>
           </td>
           <td>
            <select class="form-control">
             <option value="default">UKURAN :</option>
             <option value="default">110</option>
             <option value="default">115</option>
             <option value="default">120</option>
             <option value="default">130</option>
             <option value="default">150</option>
            </select>
           </td>
           <td>
            <select class="form-control">
             <option value="default">BAHAN :</option>
             <option value="default">MAXMARA</option>
             <option value="default">VOAL INDO</option>
             <option value="default">VOAL INDIA</option>
             <option value="default">DIAMOND</option>
             <option value="default">SILKY</option>
            </select>
           </td>
           <td><input class="form-control" type="number" name="" value=""></td>
           <td><button id="insert-more" class="btn btn-primary" type="button" name="button">ADD</button></td>
          </tr>
         </tbody>
       </table>

或者您可以在这里查看 https://jsfiddle.net/f6xcqy2s/ 。在该代码中，添加按钮将显示在每一行中，但我希望添加按钮仅显示在新行中，因此只有一个按钮。你认识路吗？

Answer 1

像下面一样隐藏按钮。将按钮的 id 更改为类并像下面一样绑定(bind)按钮。它完美地工作

$('body').on('click','.insert-more',function(){
    $("#mytable").each(function () {
        var tds = '<tr>';
        jQuery.each($('tr:last td', this), function () {
            tds += '<td>' + $(this).html() + '</td>';
        });
        tds += '</tr>';
        if ($('tbody', this).length > 0) {
            $('tbody', this).append(tds);
        } else {
            $(this).append(tds);
        }
    });
    $(this).hide();
})

here是 fiddle