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

Question

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

  $("#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更改为一个类并按如下所示绑定按钮。

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

这是小提琴

Answer 2

您需要将添加按钮放在#mytable（表）的外面，这样您就可以得到只输出html部分的期望输出，就像我在此处粘贴的那样。

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

                                        </tr>
                                    </tbody>
                                </table>
                                </table>
                                <tr>
                                <td><button id="insert-more" class="btn btn-primary" type="button" name="button">ADD</button></td></tr></table>

让我知道你还好吗？

Answer 3

在这里，首先我们创建一个事件处理函数，并将其分配给clickHandler 。 然后，当我们将按钮添加到表格行中之后，使用代码$("#insert-more").click(clickHandler);将该点击处理程序分配给新添加的按钮$("#insert-more").click(clickHandler); 。

 $( document ).ready(function() { var clickHandler = 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).remove(); $("#insert-more").click(clickHandler); }; $("#insert-more").click(clickHandler); }); 

 <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="insert-more btn btn-primary" type="button" name="button">ADD</button></td> </tr> </tbody> </table> 

Answer 4

在这里您可以找到解决方案https://jsfiddle.net/f6xcqy2s/4/

 $(document).on('click', "#insert-more", function () { $('#mytable tbody') .append(`<tr>${$(this).closest('tr').html()}</tr>`); $(this).remove(); }); 

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

在解决方案中， jQuery代码的数量非常少。

希望这会帮助你。