Question

有人可以帮助我如何遍历我的表并总结每行的数量*价格值？这是我的表：

<table id="template_item_table" class="table table-striped">
            <thead>
                <tr>
                    <th>Product Code</th>
                    <th>Unit Price ($)</th>
                    <th>Quantity</th>
                    <th></th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>12345</td>
                    <td>50</td>
                    <td><input type="text" class="form-control quantity" name="quantity"></td>
                    <td><button class="btn btn-primary"><a href="/product/{{product_code}}">Item Details</a></button></td>
                    <td><button class="btn btn-danger">Remove Item</button></td>
                </tr>
                <tr>
                    <td>2222</td>
                    <td>53</td>
                    <td><input type="text" class="form-control quantity" name="quantity"></td>
                    <td><button class="btn btn-primary"><a href="/product/{{product_code}}">Item Details</a></button></td>
                    <td><button class="btn btn-danger">Remove Item</button></td>
                </tr>
            </tbody>
        </table>

我已经达到了：

$("#template_item_table tr").each(function() {

        });

但我不确定如何继续...

Answer 1

您需要选择第二个td并乘以第三个td中输入的值：

$("#template_item_table tbody tr").each(function() {
   var value = $(this).find(" td:nth-child(2)").html();
   console.log(value);

  var quantity = $(this).find(" td:nth-child(3) input").html();
  console.log(quantity);

  var total = value * quantity;
  console.log(total);
});

您可能希望将其全部包含在输入字段的更改绑定中，以便它只在更改时运行。

Answer 2

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
    function solve() {
        var iPrice = 0;
        var iQuantity = 0;
        var sum = 0;
        $('#template_item_table tbody tr').each(function () {
            iPrice      = parseInt($(this).find('td:eq(1)').text(), 10);
            iQuantity = parseInt($(this).find('td:eq(2)').find('.quantity').val(), 10);
            sum = sum + (iPrice * iQuantity);
        });
        $('#sum').text("Sum=" + sum)
    }
    $('#solveButton').click(function () {
        solve();
    });
});
</script>
</head>

<body style="width:50%;">
    <input type="button" value="Get Sum" id="solveButton" />
  <div id="sum" style="color:red;font-weight:bold;"></div>
    <table id="template_item_table" class="table table-striped">
            <thead>
                <tr>
                    <th>Product Code</th>
                    <th>Unit Price ($)</th>
                    <th>Quantity</th>
                    <th></th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>12345</td>
                    <td>50</td>
                    <td><input type="text" class="form-control quantity" name="quantity"></td>
                    <td><button class="btn btn-primary"><a href="/product/{{product_code}}">Item Details</a></button></td>
                    <td><button class="btn btn-danger">Remove Item</button></td>
                </tr>
                <tr>
                    <td>2222</td>
                    <td>53</td>
                    <td><input type="text" class="form-control quantity" name="quantity"></td>
                    <td><button class="btn btn-primary"><a href="/product/{{product_code}}">Item Details</a></button></td>
                    <td><button class="btn btn-danger">Remove Item</button></td>
                </tr>
            </tbody>
        </table>
</body>
</html>

Answer 3

不确定您希望将这些值放在何处，但您需要使用find()找到2个输入值并将它们相乘

$("#template_item_table tr").each(function() {
   var price = +$(this).find('td').eq(1).text() || 0,
       qty = +$(this).find('.quantity').val() || 0,
       rowTotal = qty*price;
});

如果你想将它们附加到每一行，可以添加到上面

$(this).append('<td>' + rowTotal +'</td>')

如果您只想要一个总计

var total = 0;
$("#template_item_table tr").each(function() {
   var price = +$(this).find('td').eq(1).text()|| 0,
       qty = +$(this).find('.quantity').val() || 0,
       total += qty*price;
});
alert(total);

Answer 4

试试这个

<script>
jQuery(document).ready(function($) 
{                       
$('.form-control.quantity').change(function(){
ComputeTotal();
});

function ComputeTotal()
{
var i=0;
$("#template_item_table tr").each(function() {

i=i+1;
if(i>1){
var quantity1=$(this).find("td input:text").val();
var price1=$(this).find('td').eq(1).text();

sum = sum + (eval(price1) * eval(quantity1));
}
});
alert(sum);
}
</script>

如何遍历表和sum值jquery

4 个答案: