使用 jAutoCalc 插件计算动态行

Question

我正在尝试使用 jAutoCalc.js jquery plugin 以行动态 added/removed 的形式进行多个简单计算。请访问此 link 观看现场演示。虽然计算适用于第一行，但后续行不会发生。此外，我喜欢使用相同的插件对所有总值求和，并提前将其粘贴在 bottom.Thanks 的 'Sum of Total' 输入框中，以帮助我解决问题。

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
// Write JavaScript here 
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 row = table.insertRow(rowCount-1);
    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 Records.");
            break;
        }
        table.deleteRow(i);
        rowCount--;
        i--;
    }
}
}
</script>    
<script type="text/javascript" src="http://rawgit.com/c17r/jAutoCalc/master/jAutoCalc.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
    $('form[name=cart] tr[name=line_items]').jAutoCalc({keyEventsFire:  true, decimalPlaces: 2});
    $('form[name=cart]').jAutoCalc({decimalPlaces: 2});

});
//-->
</script>
<body>
<form name="cart">
<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 name="line_items" id='row_0'>
        <p>
            <td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>

            <td>
                <label>Qty</label>
                <input type="text" size="1" required="required" class="qty" name="qty" >
            </td>
            <td>
                <label for="cuprice">Price</label>
                <input type="text" size="3" required="required" class="price" name="price" >
            </td>
            <td>
                <label for="ctp">Total</label>
                 <!--<td><input type="text" size="3" readonly class="total" name="total" id="total" /></td>-->
                 <td><input type="text" name="item_total" value=""  jAutoCalc="{qty} * {price}"></td>

            </td>

        </p>
    </tr>

   </tbody>
</table>
</form>
 Sum of Total:<input type="text" name="sum"/>
  </body>

插件Link：https://github.com/c17r/jAutoCalc

Answer 1

这里是插件作者。我更新了 http://c17r.github.io/jAutoCalc/sample 处的示例以动态包含 adding/removing 行。

整个过程以树状结构运行字段级事件；当事情发生变化时，它会离开 rails 一点。最简单的方法是包装您的代码以将 jAutoCalc 连接到它自己的函数中

function autoCalcSetup() {
    $('form[name=cart]').jAutoCalc('destroy');
    $('form[name=cart] tr[name=line_items]').jAutoCalc({keyEventsFire: true, decimalPlaces: 2, emptyAsZero: true});
    $('form[name=cart]').jAutoCalc({decimalPlaces: 2});
}

并在您 add/remove 连续时调用该函数。如果存在，第一行将删除任何先前的连线。

Answer 2

现在使用 'Calx' jQuery 插件对动态创建行的表单进行计算。

使用 jAutoCalc 插件计算动态行

Calculation on Dynamic Rows using jAutoCalc Plugin

javascript

jquery

html

css

jquery-calculation