堆栈内存溢出
  简体   繁体   English

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

[英]Add new row with button jquery then remove the button

 原文  2017-09-19 04:50:00  0   4    javascript/ jquery/ html

问题描述

I'm trying to create a table that have " add " button to add new rows in every new row then remove the previous button. 我正在尝试创建一个具有“ add ”按钮的表，以便在每个新行中添加新行，然后删除上一个按钮。 I have a code like this. 我有这样的代码。 

  $("#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>

Or you can see it here https://jsfiddle.net/f6xcqy2s/ . 或者您可以在这里https://jsfiddle.net/f6xcqy2s/看到它。 In that code the add button will show up in every rows, but i wanted the add button just show up in new row only, so there will be one button only. 在该代码中，添加按钮将显示在每一行中，但是我希望添加按钮仅显示在新行中，因此将只有一个按钮。 Do you know the way? 你知道吗

4 个解决方案

解决方案1
 3  2017-09-19 04:54:51

Hide the button like below.change the id of the button to a class and bind the button like below.it works perfectly 如下所示隐藏按钮。将按钮的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();
})

here is the fiddle 这是小提琴

在此处输入图片说明

解决方案2
 0  2017-09-19 04:57:10

you need to put add button outside the #mytable (table) so you can get your desire output only change html part as i pasted here. 您需要将添加按钮放在#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>

let me know is it ok for you ? 让我知道你还好吗？

解决方案3
 0  2017-09-19 05:14:29

Here first we create an event handler function and assign it to clickHandler . 在这里，首先我们创建一个事件处理函数，并将其分配给clickHandler 。 Then when we append the button into the table row after that we assign that click handler to the newly added button using the code as $("#insert-more").click(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>

解决方案4
 0  2017-09-19 05:59:02

Here you go with a solution https://jsfiddle.net/f6xcqy2s/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>

In the solution, amount of jQuery code is very less. 在解决方案中， jQuery代码的数量非常少。

Hope this will help you. 希望这会帮助你。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 jQuery中的添加和删除按钮 - Add and Remove Button in Jquery jQuery-动态输入框以及每行中的添加/删除按钮 - Jquery - Dynamic Input Box along with add/ remove button in every row 如何在单击按钮后添加新行，html jQuery - how to add new row after button was clicked, html jquery 单击jquery中的按钮后动态添加新行 - Add a new row dynamically after clicking a button in jquery Jquery - 用于向删除面板添加面板/按钮的按钮 - Jquery - Button to add Panel / Button to Remove Panel jQuery的JavaScript添加/删除按钮 - jquery javascript add/remove button 在jQuery中添加和删除按钮功能 - ADD and REMOVE button function in jquery jQuery：按钮添加和删除最接近的 - jQuery: Button add and remove closest 使用javascript / jQuery插入新行时，如何在每个表格行中插入“删除按钮” - How do I insert a “remove button” to every table row when inserting a new row using javascript/jQuery 在数据表的新行中添加按钮，未定义 - Add button in a new row on datatable, getting undefined
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM