具有添加行功能的多行总函数

时间:2014-01-21 13:50:38

标签: javascript jquery html css

我有6个文件项目,项目名称,项目描述,价格,数量和总数。我想从每一行得到总数。并且有一个按钮,它将添加一个具有相同功能的行。 这是我的代码

 $(document).ready(function(){ 
    var counter = 2;

    $("#addButton").click(function () {

        if(counter>10){
                alert("Only 10 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 +'"/></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);
    });

    //$('#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" /></td>
    </tr>
</table>

我没有得到第一行的总数,添加行按钮不起作用。我想下面的行有一个问题

请告诉我我在这段代码中犯了什么错误?并帮助我得到这个。

0 个答案:

没有答案