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

时间：2017-09-19 04:50:01

标签： javascript jquery html

我试图创建一个包含＆＃34; add＆＃34;的表格。按钮在每个新行中添加新行，然后删除上一个按钮。我有这样的代码。

＆＃13;
＆＃13; 
 $("#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);
            }
        });
    });
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

或者你可以在https://jsfiddle.net/f6xcqy2s/看到它。 在该代码中，添加按钮将显示在每一行中，但我希望添加按钮仅显示在新行中，因此只有一个按钮。你知道吗？

4 个答案:

答案 0 :(得分：3)

隐藏下面的按钮。将按钮的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是小提琴

enter image description here

答案 1 :(得分：0)

你需要在#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>

让我知道你可以吗？

答案 2 :(得分：0)

首先，我们创建一个事件处理函数并将其分配给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>

答案 3 :(得分：0)

您可以使用解决方案https://jsfiddle.net/f6xcqy2s/4/

＆＃13;
＆＃13; 
$(document).on('click', "#insert-more", function () {
    $('#mytable tbody')
    	.append(`<tr>${$(this).closest('tr').html()}</tr>`);
    $(this).remove();
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

希望这会对你有所帮助。

相关问题
最新问题