使用 jQuery 在 keyup 上计算值答案

【问题标题】：Computing values on keyup using jQuery使用 jQuery 在 keyup 上计算值
【发布时间】：2011-07-09 15:28:30
【问题描述】：

下面的脚本计算给定项目的小计和总计。

<script type="text/javascript">
$(function(){





  $('input[type=button]').click(function(){



});  


$('input[id^=qty]').keyup(function(){
var gtotal=0;
    var parentDiv = $(this).closest('#korokor');
    var curprice=parentDiv.find('input[id^=price]').val();
    var curqty= this.value;
    var curtotal=curprice * curqty;




    parentDiv.find('input[id^=subtotal]').val(curtotal);



    $('input[id^=subtotal]').each(function(index) {
    var currentnum= $(this).val();
    var intnum =parseInt(currentnum);
    gtotal=gtotal + intnum;



  });

  $('input[name=supertotal]').val(gtotal);  
     $('input[name=payment]').val(gtotal);  

});
});
</script>
<?php    
    $viewcarter=mysql_query("SELECT * FROM prod_table WHERE CURRP=1");
?>   



</head>
<body>
<table border="1">
    <tr>
    <th>ID</th>
    <th>PRODUCT</th>
    <th>QA</th>
    <th>PRICE</th>
    <th>QTY BUY</th>
    <th>SUBTOTAL</th>
    <th>REMOVE</th>
    </tr>
</table>
<?php
if(mysql_num_rows($viewcarter)==0){
    //no products

}else{
while($row=mysql_fetch_assoc($viewcarter)){

?>

<form name="blabber" method="get" action="expander.php">
<div id="korokor">
<table border="1">


<tr>
    <td><?php echo $row['PID']; ?></td>
                <td><?php echo $row['PRODUCT']; ?></td>
                <td><?php echo $row['QTYHAND']; ?></td>
                <td><?php echo $row['S_PRICE']; ?></td>

                <input type="hidden" id="pids" name="ids[]" value="<?php echo $row['PID']; ?>">
                <input type="hidden" id="pname" name="product[]" value="<?php echo $row['PRODUCT']; ?>">
                <input type="hidden" name="dprice[]" value="<?php echo $row['B_PRICE']; ?>">
                <input type="hidden" name="sprice[]" id="<?php echo 'price'.$row['PID']; ?>" value="<?php  echo $row['S_PRICE'];  ?>"/>
                <input type="hidden" name="qoh[]"  value="<?php echo $row['QTYHAND']; ?>"/>

                <td><input type="text" name="qbuys[]" id="<?php echo 'qty'.$row['PID']; ?>"/></td>
                <td><input type="text" name="subtotal[]" id="<?php echo 'subtotal'.$row['PID']; ?>"/></td>
                <td><a href="pagmasdan.php?action=2&id=<?php echo $row['PID']; ?>"><img src="delete-icon.png"></img></a></td>
</tr>




</table>
</div>

<?php
}
?>

Grand Total:<input type="text" name="supertotal" value=""/><br/>
Customer:<input type="text" name="customer" value=""/><br/>
Payment:<input type="text" name="payment" value=""/><br/>
<input type="submit" value="sell"/>
</form>
<?php
}

?>

它可以工作，但我对它的外观有一点问题：

我试图将它们全部放在一个表中以使其更令人愉悦，但是计算 keyup 值的脚本不再起作用。我需要一些帮助来修改界面的外观。

【问题讨论】：

标签： php jquery css html-table

【解决方案1】：

使用单个表...

<form name="blabber" method="get" action="expander.php">
<div id="korokor">
<table border="1">
    <tr>
    <th>ID</th>
    <th>PRODUCT</th>
    <th>QA</th>
    <th>PRICE</th>
    <th>QTY BUY</th>
    <th>SUBTOTAL</th>
    <th>REMOVE</th>
    </tr>

<?php
if(mysql_num_rows($viewcarter)==0){
    //no products
}else{
while($row=mysql_fetch_assoc($viewcarter)){
?>
//now the loop adds a new row rather than new table for each item in the cart.
<tr class="cartItem">
    <td><?php echo $row['PID']; ?></td>
    <td><?php echo $row['PRODUCT']; ?></td>
    <td class="qnty"><?php echo $row['QTYHAND']; ?></td>
    <td class="unitPrice"><?php echo $row['S_PRICE']; ?></td>
    <td><input type="text" name="qbuys[]" id="<?php echo 'qty'.$row['PID']; ?>"/></td>
    <td><input type="text" name="subtotal[]" id="<?php echo 'subtotal'.$row['PID']; ?>"/></td>
    <td><a href="pagmasdan.php?action=2&id=<?php echo $row['PID']; ?>"><img src="delete-icon.png"></img></a>
        <input type="hidden" id="pids" name="ids[]" value="<?php echo $row['PID']; ?>">
        <input type="hidden" id="pname" name="product[]" value="<?php echo $row['PRODUCT']; ?>">
        <input type="hidden" name="dprice[]" value="<?php echo $row['B_PRICE']; ?>">
        <input type="hidden" name="sprice[]" id="<?php echo 'price'.$row['PID']; ?>" value="<?php  echo $row['S_PRICE'];  ?>"/>
        <input type="hidden" name="qoh[]"  value="<?php echo $row['QTYHAND']; ?>"/>
    </td>
</tr>

<?php
}
?>
</table>
</div>

这应该可以解决大部分布局问题，但像您尝试做的那样拥有大量表格并不是一个好主意。如果 javascript 不适用于单个表，则应对其进行调整。

我现在去看看……

恐怕这只是非常粗糙（隐形眼镜突然变干了）..但是

var runningSub = 0;
var total = 0;
$('.cartItem').each(function(){
    var qnty = $('this .qnty').html();
    var unitPrice = $('this .unitPrice').html();
    runningSub + (qnty * unitPrice);
)};
// the cart items have been processed so..
if(runningSub >0){
    total = (calc for the total price)
}
// Now you can set your values..

如果您运行上述程序并添加计算最终总数所需的附加值并将值放到您的页面上，您可能会有一些有用的东西.. 或者至少是一个很好的方向去实现目标。 .

请查看表格的 HTML，因为我已对其进行了修改以使 javascript 更易于编写。

【讨论】：

谢谢，但是当您尝试运行它时。计算值的脚本将不再工作。