Question

我有一个代码，可以找出每行的总价格（价格*数量），并且还添加了行功能。这是JS

    $(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>

现在当我尝试添加删除行功能时，添加行功能不起作用。这是我用来删除行的代码

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

请帮我解决这个问题！

Answer 1

问题是您只对现有元素绑定。

在jQuery中试试这个。它将绑定到表格，然后在click类的项目上查看任何del事件。

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

您可能还想将删除代码更改为以下内容：

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

这将搜索第一个父TR并删除它。如果您想在行中放置其他级别的子级，这可以防止以后出现问题。

你可以在我的JSFiddle中看到一个工作示例：

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

从多行中删除行 - Javascript

1 个答案: