使用jQuery计算keyup上的值

时间:2011-03-06 01:28:48

标签: php jquery css html-table

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

<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
}

?>

它有效,但我的外观有点问题:

enter image description here

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

1 个答案:

答案 0 :(得分: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更易于编写。