对动态添加的行执行计算

Perform calculations on dynamically added rows

本文关键字：执行 计算 动态 添加      更新时间：2023-09-26

下面的表单使用Javascript通过将价格和数量值相乘来计算总数，并在total '输入框'中自动显示该值。

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

现在添加了一个"添加/删除"选项(使用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>

p。S:虽然我能找到两个类似的帖子，但由于我对Javascript的了解有限，我无法实现这些解决方案。在过去一周左右的时间里，我一直在徒劳地寻找解决方案，然后才创建了这个帖子。

这很难用纯java脚本实现，但可能。强烈建议学习jQuery和/或AngularJS会让你的生活更轻松。

基本上，您需要添加行并给它们唯一的ID，然后使用每个单元格计算方法与自己的行ID。

新的HTML看起来像这样:(注意我已经从单元格中删除了ID，因为我将使用'name'属性)(页面上只允许一个唯一的ID)

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

JS: 

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;
}

工作示例(fiddle)

PS:旧的浏览器不支持querySelector函数。(我在chrome上测试过)

相关文章：