Question

我有一个显示MySQL查询结果的PHP页面。用户可以更改预期输入数量，点击Get Total按钮，用户可以看到Item Rate * Qty Intended的结果。因此，total可用于为用户创建凭证。

任何人都可以指导我如何将此功能添加到现有页面。

enter image description here

我的代码目前显示如下：

<?php
  include 'functions.php'; //for connection
?>
<table>
<tr>
<th>Select</font></th>
<th>Item Desc</th>
<th>Item Specification</th>
<th>Item Rate</th>
<th>Qty Intented</th>
</tr>

<?php
  $sql1 = mysql_query("SELECT * from item
            where item ='stationeries'")
  while ($row = mysql_fetch_array($sql1, MYSQL_ASSOC)) {
?>
<tr>
  <td><input type="checkbox" name="sel" /></td>
  <td><?php echo $row['item']; ?></td>
  <td><?php echo $row['specification']; ?></td>
  <td><?php echo $row['rate']; ?></td>
  <td><input type="text" name="qty" class="toAdd" id="qty" value="0.0" /></td>
  </tr>


<?php
  }
?>
</table><br />
<input type="button" value="Get Total" />
<input type="text" id="total" />

Answer 1

为您的表格和“获取总计”按钮添加ID：

<table id="cart">

<input id="calculateTotal" type="button" value="Get Total" />

将此脚本放在您网页的<head>中：

$(function() {
    $('#calculateTotal').click(function() {
        var total = 0;
        $('#cart tr:gt(0)').each(function() {
            total +=
                parseFloat($(this).find('td:eq(3)').text()) * 
                parseFloat($(this).find('input:last').val());
        });

        // display total in textbox
        $('#total').val(total);
    });
});

如果您想限制用户仅输入整数（例如，您不能购买一小部分肥皂），请将其添加到您的jQuery ready函数$(function() {中：

$('#cart').on('keyup', '.toAdd', function() {
    $(this).val( $(this).val().replace(/[^0-9]/, '') );
});

将购物车总数格式化为两位小数：

total = parseInt(total * 100) / 100;

演示：http://jsfiddle.net/WDxej/2/

Answer 2

我假设你只想做这个计算客户端，所以使用JavaScript。既然你也标记了jQuery，我会假设你有它...

为了进行计算，您需要能够从dom中检索数据。要做到这一点，你可以为你的HTML元素添加属性，在这种情况下，你可以放弃添加类。

<tr class="item-row">
    <td><input type="checkbox" name="sel" class="item-checkbox" /></td>
    <td><?php echo $row['item']; ?></td>
    <td><?php echo $row['specification']; ?></td>
    <td class="item-rate"><?php echo $row['rate']; ?></td>
    <td><input type="text" name="qty" class="toAdd item-qty" id="qty" value="0.0" /></td>
</tr>

现在您可以轻松地从dom中选择所需的数据并进行计算：

// in button onclick handler
$('.item-row').each(function () {
    // this now references the row
    var selected = $(this).find('.item-checkbox').is(':checked');
    var rate = parseFloat($(this).find('.item-rate').html());
    var qty = parseFloat($(this).find('.item-qty').html());

    // do calculations...

});

另外，在JS中进行数学运算时要小心especially with floats！

计算费率*数量的动态值

2 个答案: