php - 具有输入标签的多行表

Question

在发票表单中，我有一个包含 25 行的表格

<table border="1"  align="center">
<thead>
<tr>
<th>#</th>
<th>Item Name</th>
<th>Item Code</th>
<th>Quantity</th>
<th>Price</th>
<th>Amount</th>-->
<th>Net Amount</th>
</tr>
</thead>

 <tbody>
 <?php for($i=1 ; $i<=25 ; $i++) { ?>

 <tr>
 <th> <?php echo "$i"; ?> </th>
 <td><input id="itemName"  onBlur="loadAllField()" class="orderInput" type="text" align="center" ></td>
 <td><input id="itemCode" onBlur="loadAllField()"  class="orderInput" type="text" align="center" ></td>
<td><input id="quantity" class="orderInput" onKeyPress="calqtyprice()" type="text"         align="center" ></td>
<td><input id="price" class="orderInput" type="text" align="center"  readonly></td>
<td><input id="netAmount" class="orderInput" type="text" align="center" readonly ></td>
</tr>

<?php } ?>
</tbody>

<tfoot>
<tr>
<td id="tdTotal" colspan="2" style="font-size:16px"> <b>Totals</b></td>
<td id="totalspace" colspan="3"> </td>
<td><input id="netTotalAll" class="orderInput" type="text" readonly> </td>
</tr>


</tfoot>
</table>

<p id="msg" align="center"> </p>

java脚本函数是

 function loadAllField ()
{
    var itemName = document.getElementById("itemName");
var itemCode = document.getElementById("itemCode");
var quantity = document.getElementById("quantity");
var price = document.getElementById("price");
var netAmount = document.getElementById("netAmount");
var msg = document.getElementById("msg");

    msg.innerHTML = "";
// check is fill 
if ( ( (itemName == null ) || (itemName.value == "") ) && ((itemCode == null ) || (itemCode.value == "")) )
{
msg.innerHTML = "";
    itemName.value = null;
    itemCode.value =  null;
    quantity.value = null;
    price.value = null;
    netAmount.value = null;
}

// load id if item name give and load name if item code given

if ((itemName.value == "detol") || (itemCode.value=="1") ) 
{
        var itemName = document.getElementById("itemName");
var itemCode = document.getElementById("itemCode");
var quantity = document.getElementById("quantity");
var price = document.getElementById("price");
var netAmount = document.getElementById("netAmount");
var msg = document.getElementById("msg");
    msg.innerHTML = "";
    itemName.value = "detol";
    itemCode.value = "1";
    quantity.value = "";
    price.value = "40";
    netAmount.value = "";

}

else if  ( (itemName.value == "robin") || (itemCode.value == "2") )  
    {
        msg.innerHTML = "";
    itemName.value = "robin";
    itemCode.value = "2";
    quantity.value = "";
    price.value = "90";
    netAmount.value = "";
    }

    else
    {   
    msg.innerHTML = "Product not find";
    //msg.innerHTML.blink();
    itemName.value = "";
    itemCode.value = "";
    quantity.value = "";
    price.value = "";
    netAmount.value = "";

    }

} // end of load id function

function calqtyprice()
{
    for ( i=1; i==25; i++)
    {

    var price = document.getElementById("price");
    var quantity = document.getElementById("quantity");
    var netAmount = document.getElementById("netAmount");
    var netTotalAll = document.getElementById("netTotalAll");

    var netamt = price.value * quantity.value ;

     netAmount.value = netamt;

    netTotalAll = netAmount.value + netAmount.value;
    }
}

问题是如何遍历每一行并从输入中获取值并计算并在最后一行显示 nettotal。

或者是否有任何机制或教程。

Answer 1

假设您创建了具有唯一 id 的元素，如下所示

<input type="text" id="price_1"

在您的情况下，您可以使用 $i 值来创建唯一命名的 ids。

<input type="text" id="price_<?php echo $i; ?>" 

然后在你的 javascript 循环中

for ( i=1; i<=25; i++) {
   var price = document.getElementById("price_" + i);

让您可以访问每个独特的元素。