这是我在这里的第一个问题,所以请放轻松,如果之前有人问过这个问题,我深表歉意,但我找不到任何提及。
我正在为我工作的公司创建采购订单系统,使用 PHP、MSSQL 和一点 JS/JQuery。我有一个我创建的小表格,虽然我无法让它在 JSFiddle 上工作,但它在我的环境中工作,我遇到的问题是当我试图计算数量 * 单位成本 + 交付时。这适用于第一行,但不适用于我在其后添加的动态行。
我明白为什么这是因为输入框没有唯一标识符,我对 JS 和 JQuery 的了解很少,所以我在这里陷入了困境。谁能给我指出正确的方向。
提前致谢
JSFiddle of what i have so far
<div class="panel-body">
<p>
<input type="button" class="btn btn-primary" value="Add Line" onclick="addRow('dataTable')">
<input type="button" class="btn btn-danger" value="Remove Line" onclick="deleteRow('dataTable')">
</p>
<table width="100%">
<thead>
<tr>
<th width="2%"></th>
<th width="8%">Part Number</th>
<th width="20%">Description</th>
<th width="8%">Quantity</th>
<th width="15%">Delivery</th>
<th width="15%">Unit Cost</th>
<th width="15%">Total Cost</th>
</tr>
</thead>
</table>
<table id="dataTable" width="100%" border="0">
<tbody>
<tr>
<td width="2%"><input type="checkbox" name="chk[]"></td>
<td width="8%">
<input type="text" class="form-control" style="width: 90%;" name="partnumber[]">
</td>
<td width="20%">
<input type="text" class="form-control" style="width: 90%;" required="required" name="description[]">
</td>
<td width="9%">
<input type="number" class="form-control" style="width: 70%;" step="1" required="required" onblur="return Calculate();" id="quantity" name="quantity[]">
</td>
<td width="15%">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-gbp"></i>
</span>
<input type="number" pattern="^\d+(\.|\,)\d{2}$" class="form-control" onblur="return Calculate();" placeholder="0.00" step="0.01" style="width: 60%;" id="delivery" required="required" name="delivery[]">
</div>
</td>
<td width="15%">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-gbp"></i>
</span>
<input type="number" pattern="^\d+(\.|\,)\d{2}$" class="form-control" onblur="return Calculate();" placeholder="0.00" step="0.01" style="width: 60%;" id="unitcost" required="required" name="unitcost[]">
</div>
</td>
<td width="15%">
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-gbp"></i>
</span>
<input type="number" pattern="^\d+(\.|\,)\d{2}$" class="form-control" placeholder="0.00" step="0.01" style="width: 60%;" id="totalcost[]" required="required" name="totalcost" disabled>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Javascript:
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if(rowCount < 20){ // 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 number of purchase order rows reached");
}
}
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 purchase order lines");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}
<script>
function Calculate() {
var quantity = document.getElementById("quantity").value;
var delivery = document.getElementById("delivery").value;
var unitcost = document.getElementById("unitcost").value;
var total = (+quantity * +unitcost) + +delivery;
document.getElementById("totalcost").value = total.toFixed(2);
}
更新: Brijesh 让我走上了正确的道路,感谢 Anthony 提供的使用 .on 而不是 .live 的提示。在此 JS fiddle 上的工作代码 http://jsfiddle.net/oczqkbpd/8/
$(document).ready(function () {
$(document).on("change", "input[name^=delivery],input[name^=quantity]", function () {
$("input[name^=unitcost]").trigger("change");
});
$(document).on("change", "input[name^=unitcost]", function () {
var unitcost = $(this).val() == "" ? 0 : $(this).val();
var delivery = $(this).closest("td").siblings().find("input[name^=delivery]").val();
var quantity = $(this).closest("td").siblings().find("input[name^=quantity]").val();
var total = eval(quantity * unitcost) + Number(delivery);
$(this).closest("td").siblings().find("input[name^=totalcost]").val(total.toFixed(2));
});
});
最佳答案
使用 jquery 1.7 版本,我已经使用 .live() 函数和 unitcost
文本框的更改事件实现了您需要的功能:
$("input[name^=delivery],input[name^=quantity], input[name^=unitcost]").live("input change", function(){
$("input[name^=unitcost]").trigger("keyup");
});
$("input[name^=unitcost]").live("keyup", function(){
var unitcost = $(this).val()=="" ? 0 : $(this).val();
var delivery = $(this).closest("td").siblings().find("input[name^=delivery]").val();
var quantity = $(this).closest("td").siblings().find("input[name^=quantity]").val();
var total = eval(quantity * unitcost) +parseInt(delivery);
$(this).closest("td").siblings().find("input[name^=totalcost]").attr("disabled",false);
$(this).closest("td").siblings().find("input[name^=totalcost]").val(total.toFixed(2));
$(this).closest("td").siblings().find("input[name^=totalcost]").attr("disabled",true);
});
});
如有任何疑问,请提出。
关于javascript - 创建计算输入框的动态表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29557236/