Question

这是我在这里的第一个问题，如果之前已经提出这个问题，请轻松道歉，但我没有提及它。

我正在为使用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让我走上了正确的轨道，多亏了安东尼使用.on代替.live。这个JS小提琴的工作代码 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));
});
});

Answer 1

使用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);


    });
});

Updated Fiddle

如果您有任何疑问，请询问。

创建用于计算输入框的动态表单

1 个答案: