用按鈕jquery添加新行，然後刪除按鈕

我想創建一個「add」按鈕在每個新行中添加新行然後刪除上一個按鈕的表。我有這樣的代碼。用按鈕jquery添加新行，然後刪除按鈕

$("#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/看到它。在該代碼中，添加按鈕將顯示在每一行中，但我希望添加按鈕僅顯示在新行中，因此只會有一個按鈕。你知道嗎？

來源

2017-09-19 naoval luthfi

你的代碼工作正常，只需將按鈕放在表格之外，如下所示：-https：//jsfiddle.net/4zvykjex/ –

不，我希望它與新行內聯 –

隱藏按鈕像below.change按鈕的ID一類和綁定按鈕像below.it完美的作品

$('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是小提琴

來源

2017-09-19 04:54:51 codegeek

現在你已經糾正了它。 –

這也適用於+1：D –

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

讓我知道你可以嗎？

來源

2017-09-19 04:57:10

因此，按鈕將在表外？不，我希望按鈕與新排內聯 –

這裏首先我們創建一個事件處理函數並將其分配給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> 
 
            \t <th>Nama Klien</th> 
 
            \t <th>Nama File</th> 
 
            \t <th>Ukuran</th> 
 
            \t <th>Bahan</th> 
 
            \t <th>Jumlah</th> 
 
            \t <th></th> 
 
            </thead> 
 
            <tbody> 
 
             <tr> 
 
             \t <td> 
 
              <label class="checkbox"> 
 
               <input type="checkbox" value="" data-toggle="checkbox"> 
 
              </label> 
 
              </td> 
 
             \t <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> 
 
             \t <td><input class="form-control" type="number" name="" value=""></td> 
 
             \t <td><button id="insert-more" class="insert-more btn btn-primary" type="button" name="button">ADD</button></td> 
 
             </tr> 
 
            </tbody> 
 
           </table>

來源

2017-09-19 05:14:29

它適合你嗎？這是你想要的預期輸出嗎？ –

這是，但我用更少的代碼有更好的解決方案。但是，謝謝 –

在這裏，你去了一個解決方案https://jsfiddle.net/f6xcqy2s/4/

$(document).on('click', "#insert-more", function() { 
 
    $('#mytable tbody') 
 
    \t .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代碼量是非常少的。

希望這會幫助你。

來源

2017-09-19 05:59:02 Shiladitya

是的，這是非常好的。但有什麼區別beetwen hide（）;和remove（）;我的意思是我知道hide（）;是hide remove（）;是刪除，但一定有區別對嗎？ –

@naovalluthfi。是的，有一個不同的。 'Hide'會設置'display：none'屬性，而'remove'會從'DOM'中移除元素。如果你想隱藏，那麼請使用隱藏而不是刪除。 – Shiladitya

這樣哪個更好？ –

用按鈕jquery添加新行，然後刪除按鈕

回答

相關問題