我正在尝试使用 jAutoCalc.js jquery plugin 进行多个简单计算以动态添加/删除行的形式。请访问此链接观看现场演示。虽然计算适用于第一行，但不适用于后续行。另外，我喜欢使用同一插件对所有总值进行求和，并将其粘贴在底部的“总计总和”输入框中。提前感谢您的帮助。
<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>
最佳答案
插件作者在这里。我已将示例更新为 http://c17r.github.io/jAutoCalc/sample包括动态添加/删除行。
整个事情以树结构的字段级事件为基础；当事情发生变化时，它就会有点偏离轨道。最简单的方法是包装代码以将 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});
}
每当添加/删除行时都会调用该函数。第一行将删除任何先前的连线(如果存在)。
关于javascript - 使用 jAutoCalc 插件计算动态行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31825960/