Question

我有这个jquery脚本示例，有谁知道它为什么不起作用？我在django上使用这个脚本。

<html>
<head>
<script type="text/javascript" src="/static/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
function doCalc() {
    var total = 0;
    $('tr').each(function() {
        $(this).find('span.amount').html($('input:eq(0)', this).val() * $('input:eq(1)', this).val());
    });
    $('.amount').each(function() {
        total += parseInt($(this).text(),10);
    });
    $('div.total_amount').html(total);
}
$('button').click(doCalc);
</script>
<script type="text/javascript">
    $(document).ready(function(){ 

    doCalc();

});
</script>
</head>

控制台浏览器没有错误。

<body>
<table class="table table-striped table-condensed table-bordered">
<thead>
    <tr>
        <th>Item</th>
        <th width="20%">Value</th>
        <th width="20%">Quantity</th>
        <th class="actions">Total</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Item</td>
        <td><input type="text" class="input-small" name="var_1" value="0"></td>
        <td><input type="text" class="input-small" name="var_1_1" value="0"></td>
        <td>$<span class="amount"></span> </td>
    </tr>
    <tr>
        <td>Item</td>
        <td><input type="text" class="input-small" name="var_2" value="0"></td>
        <td><input type="text" class="input-small" name="var_2_2" value="0"></td>
        <td>$<span class="amount"></span> </td>
    </tr>
    <tr>
        <td colspan="3"><strong>Total event cost (viability)</strong></td>
        <td><strong>$<div class="total_amount">total</div></strong></td>
    </tr>
    </tbody></table><button>Go!</button>
</body>
</html>

如果我想添加另一个文本字段来计算我应该怎么做？谢谢。

Answer 1

为数量添加课程。具有此类名的输入字段的值用作乘数;添加常规字段的值：

<tr>
  <td> .. amount</td>
  <td><input class="quantity" .. ></td>
</tr>

尝试这样的事情：

var $rows = $('table tbody tr');
var total = 0;

$rows.each(function () {
  var $this = $(this);
  var rowTotal = 0;
  $('input', $this).each(function () {
    rowTotal = $(this).hasClass('quantity') ? rowTotal * parseInt($(this).val(), 10) : rowTotal + parseInt($(this).val(), 10);
  });
  $('amount', $this).text(rowTotal);
  total += rowTotal;
});

$('. total_amount').text(total);

通过这种方式，您可以根据需要在表格行中添加任意数量的输入字段。

JQuery：计算

1 个答案: