JQuery單擊事件來添加或刪除表格行

我有一個表格的頂部有加號或減號字形圖標，允許用戶添加或減去行。我的代碼有效，但如果用戶多次點擊減號按鈕，它會吃掉整個表格。JQuery單擊事件來添加或刪除表格行

我試過的是給我添加的行添加一個唯一的ID標籤，並且只刪除帶有ID的TR，但是如果添加了2行並且減號被按下，那麼兩行都將被立即刪除，我只想一次刪除一行。注意：下面的代碼並不反映這種嘗試。

Glyphicons：

<div class="well" style="margin-bottom:0px;" id="addrow"> 
    <span class="glyphicon glyphicon-plus" id="add"></span> 
    &nbsp;&nbsp;&nbsp;&nbsp; 
    <span class="glyphicon glyphicon-minus" id="minus"></span>

表：

<table class="table table-bordered table-striped" style="margin-bottom:0px;" id="myTable"> 
    <tr> 
     <td>Customer Master #</td> 
    </tr> 
    <tr> 
     <td><input type="text" class="form-control" ></td> 
    </tr> 
    </table>

JS：

$(document).ready(function(){ 
    $("#addrow").on("click", "span#add", function(){ 
     var tablerow = '<tr><td><input type="text" class="form-control" ></td></tr>' 
     $("#myTable tr:last").after(tablerow); 
    }) 
    $("#addrow").on("click", "span#minus", function(){ 
     $('#myTable tr:last').remove(); 
    }) 
    });

來源

2013-08-16 Steve W.

使用類，與其標識，標識應該是唯一 – DarkAjax

你是正確的，但不管我用同樣的結果會發生。 –

我沒有能夠重現你的錯誤......請更新有問題的代碼小提琴http://jsfiddle.net/GRUFA/ – Fabi

我添加了一個if語句，只允許一行被取出，如果該表有3行或更多行。這保留了我始終想要在頁面上的最後兩行。

if ($('#myTable tr').length > 2)

這似乎解決了這個問題。

全碼：

$("#addrow").on("click", "span#minus", function(){ 
     if ($('#myTable tr').length > 2) { 
     $('#myTable tr:last').remove(); 
    }; 
    })

來源

2013-08-19 13:59:46

還不確定是否與您的代碼改變，但在這裏100％是增加了一個小提琴或刪除 - 但不會刪除第一行（不會吃掉整個表格）。

http://jsfiddle.net/HR5se/

$('#myTable tr .form-control').size()

會給你多少數據（輸入）行也有。在這個小提琴中，我檢查是否有多於一個的數據行，如果不是，刪除不會發生。

注意：我把你的字形變成了「+」和「 - 」文字，所以我可以在這裏看到它們。

來源

2013-08-16 17:36:13 Tor

這是朝正確方向邁出的一步。在我的代碼中有更多的列。我簡化了它的問題。我寧願不根據.form-control做出我的選擇。 –

@SteveW。你能夠適應你的真實代碼嗎？這個想法是用一個類來唯一標識你的輸入行，然後使用.count（）這個類來確保刪除僅在至少有2個這樣的情況下才起作用。 – Tor

看看如果更改onclick事件爲mouseup有任何影響。我曾經有過類似的問題。

來源

2013-08-17 01:19:11 Andy

JQuery單擊事件來添加或刪除表格行

回答

相關問題