从多行删除行 - 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

回答

相关问题