從多行刪除行 - Javascript

我有一個代碼，可以找出每行的總數（價格*數量），並且它還具有添加行功能。這裏是JS從多行刪除行 - Javascript

$(document).ready(function(){ 


    var counter = 2; 

    $("#addButton").click(function() { 
     if(counter>100){ 
       alert("Only 100 textboxes allowed"); 
       return false; 
     } 

     var newTextBoxDiv = $(document.createElement('tr')) 
      .attr("id", 'TextBoxDiv' + counter); 

     newTextBoxDiv.after().html('<td class="first"><input placeholder="Item Code ' + counter + '" class="itmcode" type="text" name="data[' + counter + '][0]" id="itemcode' + counter + '" ></td>' + '<td><input class="itmname" placeholder="Item Name ' + counter + '" type="text" name="data[' + counter + '][1]" id="itemname' + counter + '" ></td>' + '<td><input class="itmdesc" placeholder="Item DESC' + counter + '" type="text" name="data[' + counter + '][2]" id="itemdesc' + counter + '" ></td>' + '<td><input class="itmamnt" placeholder="Item AMT' + counter + '" type="text" name="data[' + counter + '][3]" id="itemamnt' + counter + '" /></td>' + '<td><input class="itmqty" placeholder="Item QTY ' + counter + '" type="text" name="data[' + counter + '][4]" id="itemqty' + counter + '" /></td>' + '<td><input type="text" name="total'+ counter + '" id="total'+ counter +'" class="total" /></td>'); 

     newTextBoxDiv.appendTo("#TextBoxesGroup"); 

     counter++; 
    }); 

    $(document).on('keyup', '.itmqty', function(ev){  
     // grab ID to get row number 
     thisID = $(this).attr("id"); 
     rowNum = thisID.slice(-1); 

     //get Amount entered 
     amt = $('#itemamnt'+rowNum).val(); 
     //get QTY 
     qty = $('#itemqty'+rowNum).val();   
     $('#total'+rowNum).val(amt*qty); 

     currentCount = counter-1; 
     var tot = 0; 
     $('.total').each(function() { 
      tot += parseFloat($(this).val());    
     }); 

     $('#running_total').val(tot);  
    }); 

    //$('#total').val($('#itm-qty').val() * $('#itm-amnt').val()); 
});

HTML

<input type="button" id="addButton" value=" Add Row " /> 

<table id="TextBoxesGroup"> 
    <tr> 
     <td><input id="itemcode1" placeholder="Item Code 1" class="itmcode" /></td> 
     <td><input id="itemname1" placeholder="Item Name 1" /></td> 
     <td><input id="itemdesc1" placeholder="Item Description 1" /></td> 
     <td><input id="itemamnt1" placeholder="Item Amount 1" class="itmamnt" /></td> 
     <td><input id="itemqty1" placeholder="Item Qty 1" class="itmqty" /></td> 
     <td><input id="total1" placeholder="Item Total 1" class="total" /></td> 
    </tr> 
</table> 

<table> 
    <tr> 
     <td> Running Total </td> 
     <td> <input name="running_total" id="running_total" /></td> 
    </tr>

現在，當我試圖添加刪除排功能，增加排功能不是working.Here是我用於刪除行

代碼

$('.del').live('click',function(){ 
    $(this).parent().parent().remove(); 
}); 
$('.add').live('click',function(){ 
    $(this).val('Delete'); 
    $(this).attr('class','del'); 
});

請幫我解決這個問題！

來源

2014-01-22 user3219325

我沒有看到所提供的任何HTML或.DEL。新增按鈕，你可以請你的地方有什麼樣的http：//小提琴.jshell.net/ –

問題是您僅限於現有元素。

在jQuery中試試這個。它將綁定到桌子上，然後在del類的項目上觀看任何click事件。

$('#TextBoxesGroup').on('click','.del', function(){ 
    $(this).parent().parent().remove(); 
});

你也可能要改變你的代碼刪除爲以下：

$(this).closest('tr').remove();

這將搜索的第一個父TR並將其刪除。如果你想在你的行中放置其他級別的孩子，這將防止問題發生。

你可以在我的jsfiddle看到一個工作示例：

http://jsfiddle.net/JhrvN/1/

來源

2014-01-22 12:48:23 Mark

嗨馬克，你的編碼在小提琴中工作得很好。但是，當我嘗試在Chrome/Firefox中，刪除功能不工作！ – user3219325

從多行刪除行 - Javascript

回答

相關問題