Javascript 对动态添加的行执行计算_Javascript

Javascript 对动态添加的行执行计算

javascript

Javascript 对动态添加的行执行计算,javascript,Javascript,下表使用Javascript将价格和数量值相乘计算出总金额，并自动在总“输入框”中显示该值 <html> <script> function calculate() { var myBox1 = document.getElementById('qty').value; var myBox2 = document.getElementById('price').value; var myResult1 = myBox1 * myBox

下表使用Javascript将价格和数量值相乘计算出总金额，并自动在总“输入框”中显示该值

<html> 
<script>
    function calculate() {
    var myBox1 = document.getElementById('qty').value;  
    var myBox2 = document.getElementById('price').value;
    var myResult1 = myBox1 * myBox2;
    total.value = myResult1;

    }       
</script> 
<body>
<p> 

           <table id="dataTable" class="form" border="1">
              <tbody>
                <tr>
                  <p>
                  <td>
                        <label>Quantity</label>
                        <input type="text" required="required" name="qty" id="qty" oninput="calculate()">
                     </td>
                     <td>
                        <label for="price">Price</label>
                        <input type="text" required="required" class="small"  name="price" id="price" oninput="calculate()">
                     </td>
                     <td>
                        <label for="total">Total</label>
                        <input type="text" required="required" class="small"  name="total" id="total">

                     </td>
                     <td>

                     </td>
                        </p>
                </tr>
                </tbody>
            </table>
</body>
</html>


函数计算（）{
var myBox1=document.getElementById（'qty'）.value；
var myBox2=document.getElementById（'price'）.value；
var myResult1=myBox1*myBox2；
total.value=myResult1；
}       


量
价格
全部的

现在添加了一个“Add/Remove”选项（使用Javascript），如下所示，该选项在表单中添加/删除行，并且仍然希望像以前一样对每一行进行计算。请帮帮我，因为我是新手

<html>
<script>
function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    if(rowCount < 4){                           // limit the user from creating fields more than your limits
        var row = table.insertRow(rowCount);
        var colCount = table.rows[0].cells.length;
        for(var i=0; i<colCount; i++) {
            var newcell = row.insertCell(i);
            newcell.innerHTML = table.rows[0].cells[i].innerHTML;
        }
    }else{
         alert("Maximum Passenger per ticket is 4.");

    }
}

function deleteRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    for(var i=0; i<rowCount; i++) {
        var row = table.rows[i];
        var chkbox = row.cells[0].childNodes[0];
        if(null != chkbox && true == chkbox.checked) {
            if(rowCount <= 1) {                         // limit the user from removing all the fields
                alert("Cannot Remove all the Passenger.");
                break;
            }
            table.deleteRow(i);
            rowCount--;
            i--;
        }
    }
}

function calculate() {
        var myBox1 = document.getElementById('qty').value;  
        var myBox2 = document.getElementById('price').value;
        var myResult1 = myBox1 * myBox2;
        total.value = myResult1;

    }       
</script> 
<body>
<p> 
                <input type="button" value="Add" onClick="addRow('dataTable')" /> 
                <input type="button" value="Remove" onClick="deleteRow('dataTable')"  /> 

           <table id="dataTable" class="form" border="1">
              <tbody>
                <tr>
                  <p>
                  <td>
                        <label>Quantity</label>
                        <input type="text" required="required" name="qty" id="qty" oninput="calculate()">
                     </td>
                     <td>
                        <label for="price">Price</label>
                        <input type="text" required="required" class="small"  name="price" id="price" oninput="calculate()">
                     </td>
                     <td>
                        <label for="total">Total</label>
                        <input type="text" required="required" class="small"  name="total" id="total">

                     </td>
                    </p>
                </tr>
                </tbody>
            </table
</body>
</html>


函数addRow（tableID）{
var table=document.getElementById（tableID）；
var rowCount=table.rows.length；
如果（rowCount<4）{//限制用户创建超出限制的字段
var row=table.insertRow（rowCount）；
var colCount=table.rows[0].cells.length；
对于（var i=0；i来说，无论多么可能，纯java脚本都很难实现这一点。
建议您学习jQuery和/或AngularJS，这将使您的生活更加轻松
基本上，您需要添加行并为它们指定唯一的ID，然后使用每个单元格计算方法及其自己的行ID
新的HTML如下所示：（注意，我已经从单元格中删除了ID，因为我将使用'name'属性）（页面上只允许一个唯一的ID）


量
价格
全部的


JS:
函数addRow（tableID）{
var table=document.getElementById（tableID）；
var rowCount=table.rows.length；
如果（rowCount<4）{//限制用户创建超出限制的字段
var row=table.insertRow（rowCount）；
var colCount=table.rows[0].cells.length；
row.id='row_'+rowCount；
对于（变量i=0；i对于（i=0；给你两个建议：1.将数据保存在对象中，而不是DOM中。2.尝试查看各种JavaScript框架。使用Angular JS可以很容易地实现这一点。使用相同的代码，你必须在addRow（）时添加calculate（）函数。非常感谢。工作完美。
<input type="button" value="Add" onClick="addRow('dataTable')" />
<input type="button" value="Remove" onClick="deleteRow('dataTable')" />
<table id="dataTable" class="form" border="1">
    <tbody>
        <tr id='row_0'>
            <p>
                <td>
                    <label>Quantity</label>
                    <input type="text" required="required" name="qty" oninput="calculate('row_0')">
                </td>
                <td>
                    <label for="price">Price</label>
                    <input type="text" required="required" class="small" name="price" oninput="calculate('row_0')">
                </td>
                <td>
                    <label for="total">Total</label>
                    <input type="text" required="required" class="small" name="total">
                </td>
            </p>
        </tr>
    </tbody>
</table>

function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    if (rowCount < 4) { // limit the user from creating fields more than your limits
        var row = table.insertRow(rowCount);

        var colCount = table.rows[0].cells.length;
        row.id = 'row_'+rowCount;
        for (var i = 0; i < colCount; i++) {
            var newcell = row.insertCell(i);
            newcell.outerHTML = table.rows[0].cells[i].outerHTML;            
        }
       var listitems= row.getElementsByTagName("input")
            for (i=0; i<listitems.length; i++) {
              listitems[i].setAttribute("oninput", "calculate('"+row.id+"')");
            }
    } else {
        alert("Maximum Passenger per ticket is 4.");

    }
}

function deleteRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    for (var i = 0; i < rowCount; i++) {
        var row = table.rows[i];
        var chkbox = row.cells[0].childNodes[0];
        if (null !== chkbox && true === chkbox.checked) {
            if (rowCount <= 1) { // limit the user from removing all the fields
                alert("Cannot Remove all the Passenger.");
                break;
            }
            table.deleteRow(i);
            rowCount--;
            i--;
        }
    }
}

function calculate(elementID) {
    var mainRow = document.getElementById(elementID);
    var myBox1 = mainRow.querySelectorAll('[name=qty]')[0].value;
    var myBox2 = mainRow.querySelectorAll('[name=price]')[0].value;
    var total = mainRow.querySelectorAll('[name=total]')[0];
    var myResult1 = myBox1 * myBox2;
    total.value = myResult1;

}