Question

我想在oninput方法上做Sum。表示按下按钮的功能将被调用，并在段落<p>标签中显示两个输入的总和。

我有这样的javascript函数：

quote:function(){

    var button = document.getElementById('insert');
    var table = document.getElementById('table');
    $("#insert").click(function(){
        var position=Math.round(table.rows.length - 3);
        var row = table.insertRow(position);
        var i=1;
        row.innerHTML = '<td><input type="integer" name="qty[]" class="form-control" id="qty_' +position +'" oninput="myFunction(demo'+position+', event)"></td><td><input type="text" name="discription[]" class="form-control"></td><td><input  type="text"  name="price[]" class="form-control" placeholder="0.00" id="price_'+ position+'" oninput="myFunction(demo'+position+', event)"></td><td><input  type="text" name="discount[]" class="form-control" placeholder="0.00"><td><input  type="text"  name="discountper[]" class="form-control" placeholder="0.00%"></td></td><td><p id="demo'+position+'"></p></td><td><input type="checkbox" name="taxed[]" class="form-control"></td> <td><a class="btn btn-circle red-haze btn-sm" href="javascript:void(0);" id="remCF"><i class="fa fa-times"></i></a></td>';
        $("#remCF").live('click',function(){
            $(this).parent().parent().remove();
        });

    });

},

追加后看起来像这样。

我想使用数量*价格计算Total Amount。

但我无法做到这一点。看起来行似乎很好。但是当我尝试调用该函数时，我无法指定文本在myFunction中。

这是myFuntion的样子：

function myFunction(place, event) {
        var x =parseInt(document.getElementById(event.target.id).value); <!----now the problem is here i am not able to specify what QTY is clicked and which input is clicked -->
        var y= parseInt(document.getElementById(event.target.id).value); <!----now the problem is here i am not able to specify what PRICE is clicked and which input is clicked -->
        var z=x*y;
        document.getElementById(place).innerHTML = z;
}

我想按行进行计算。

如果你想知道我的HTML看起来如何作为参考，那么这就是它的样子。

<table class="table table-striped table-bordered table-hover" id="sample_3">
    <thead>
        <tr>
            <th style="width:7%;">
                Qty
            </th>
            <th style="width:50%;">
                 Description
            </th>
            <th style="width:10%;">
                Unit Price
            </th>
            <th style="width:10%;">
                Discount(Rs/$)
            </th>
            <th style="width:10%;">
                Discount%
            </th>

            <th style="width:7%;">
                Total
            </th>
            <th style="width:2%;">
                 Taxed
            </th>
            <th style="width:2%;">
                Action
            </th>
        </tr>
    </thead>
    <tbody id="table">
        <tr class="odd gradeX"  id="p_scents" name="p_scnt">
            <td>
                 <input type="integer" name="qty[]" class="form-control" value="1"  id="myInput1" oninput="myFunction('demo', event)" >
            </td>
            <td>
                <input type="text"   name="discription[]" class="form-control">
            </td>
            <td>
                <input  type="text"  name="price[]" class="form-control" placeholder="0.00" id="myInput2" oninput="myFunction('demo', event)">
            </td>
            <td>
                <input  type="text"  name="discount[]" class="form-control" placeholder="0.00">
            </td>
            <td>
                <input  type="text"  name="discountper[]" class="form-control" placeholder="0.00%">
            </td>
                <td>
                    <p id="demo"></p>
                </td>
            <td>
            <div align="center"><input type="checkbox" name="taxed[]" class="form-control"></div>
            </td>
            <td></td>
        </tr><!-- to add new column -->
        <tr>
            <td colspan="4" >
             <div align="right">    
                <b>Sub Total:</b>
             </div> 
            </td>
            <td></td> 
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td colspan="6" >
            <a id="insert">Add a New Service</a><br>
            <a id="ajax-demo" data-toggle="modal">
            Predifined Services </a><td>
        </tr>
    </tbody>

</table>

这里是Jsfiddle链接：

https://jsfiddle.net/5xaaneor/2/

谢谢！

通过javascript使用innerHTML方法添加动态行的SUM

0 个答案: