在 HTML 中生成表格输入标记的每一行总计

Question

[这种类型的输出我想要我从数据库中获取数据并存储在表中，如果用户输入的数量比我想要的总数在添加列中，用户现在将添加数量` 先生没有。 产品名称 价格 数量 添加

            </tr>
            <tr>
            <?php
            mysql_query ("set character_set_results='utf8'"); 
              $query= mysql_query("SELECT * FROM $statement LIMIT $startpoint,$limit");
              while($row = mysql_fetch_array($query))
              {


            ?>
                <td><?php echo $row['srno'];?></td>
                <td><?php echo $row['pname'];?></td>


               <!-- <td><input id="price" type="number" value="0" oninput="updateOutput()"/></td>
                <td><input id="qty" type="number" value="0" oninput="updateOutput()" /></td>-->
               <td> <input id="price" type="number" value="<?php echo $row['price'];?>" oninput="myFunction()"></td>
               <td><input id="qty" type="number"  value="0" oninput="myFunction2()" ></td>
                <td>

               <p id="demo">0</p>

                </td>


            </tr>

`]1

Answer 1

<script>
function myFunction() {
    var price       = document.getElementsByClassName('price');
    var quantity    = document.getElementsByClassName('quantity');
    var totalPrice=0,totalQuantity=0;

    for(var i=0;i<price.length;i++){
        totalPrice+=parseInt(price[i].innerHTML);
    }

    for(var i=0;i<quantity.length;i++){
        totalQuantity+=parseInt(quantity[i].value);
    }

    console.log(totalPrice,totalQuantity); /*Here is your Result variable*/
	
	document.getElementById('priceResult').innerHTML = totalPrice;	
}
</script>

<table border="0" width="100%" cellpadding="0" cellspacing="0" id="product-table" >
				<tr>
                 
					
                    <th class="table-header-repeat line-left minwidth-1"><a href="">Price</a></th>
                    <th class="table-header-repeat line-left minwidth-1"><a href="">Quantity</a></th>
                    <th class="table-header-repeat line-left minwidth-1"><a href="">ADD</a></th>
                   				
				</tr>
				<tr><?php
				mysql_query ("set character_set_results='utf8'"); 
				  $query= mysql_query("SELECT * FROM product");
				  while($row = mysql_fetch_array($query))
				  {
					 ?>
                
                    
                   <td class="price" >5</td>
                   <td><input class="quantity" type="number"  value="0" oninput="myFunction()" ></td>
                    <td>
                     
                   <div id="priceResult"></div>

					</td>
                 
                                       
                </tr>
<?php } ?>
</table>

Answer 2

JavaScript 解决方案：

function getResult(){
    var price       = document.getElementsByClassName('price');
    var quantity    = document.getElementsByClassName('quantity');
    var totalPrice=0,totalQuantity=0;

    for(var i=0;i<price.length;i++){
        totalPrice+=parseInt(price[i].value);
    }

    for(var i=0;i<quantity.length;i++){
        totalQuantity+=parseInt(quantity[i].value);
    }

    document.getElementById('totalPrice').innerHTML = totalPrice;
    document.getElementById('totalQuantity').innerHTML = totalQuantity;
  }

getResult();

<table border="1" width="100%" cellpadding="0" cellspacing="0" id="product-table" >
    <tr style="background:#3cf;color:white">
        <th class="table-header-repeat line-left minwidth-1"><a href="">Price</a></th>
        <th class="table-header-repeat line-left minwidth-1"><a href="">Quantity</a></th>
        <th class="table-header-repeat line-left minwidth-1"><a href="">ADD</a></th>
    </tr>
    <tr>
       <td><input class="price" onkeyup="getResult()" oninput="getResult()" type="number"  value="20"></td>
       <td><input class="quantity" onkeyup="getResult()" oninput="getResult()" type="number"  value="10"></td>
       <td><p id="demo">0</p></td>
    </tr>
    <tr>
       <td><input class="price" onkeyup="getResult()" oninput="getResult()" type="number"  value="20"></td>
       <td><input class="quantity" onkeyup="getResult()" oninput="getResult()" type="number"  value="20"></td>
       <td><p id="demo">0</p></td>
    </tr>
    <tr>
       <td><input class="price" onkeyup="getResult()" oninput="getResult()" type="number"  value="50"></td>
       <td><input class="quantity" onkeyup="getResult()" oninput="getResult()" type="number"  value="30"></td>
       <td><p id="demo">0</p></td>
    </tr>
    <tr style="background:black;color:white">
        <td id="totalPrice"></td>
        <td id="totalQuantity"></td>
        <td>&nbsp;</td>
    </tr>
</table>