0

我有一个 jquery / javascript 函数，它总计我订单中的多维数据集数。这工作100％，低于。

function calculateTotalVolume() {
    var grandTotalCubes = 0;
    $("table.authors-list").find('input[name^="cubicvolume"]').each(function () {
        grandTotalCubes += +$(this).val();
    });
    $("#grandtotalcubes").text(grandTotalCubes.toFixed(2));
}

如上所述，效果很好。我需要第二个函数来汇总相同的字段，但前提是选中了名为 Treated 的复选框。每行都有一个名为的复选框，但由于表格是动态生成的，因此每次都会在名称后面附加一个计数器，因此我使用name^="treated"

我在追求类似下面的东西，但这不起作用：

function calculateTotalTreatedVolume() {
    var grandTotaltreatedCubes = 0;
    $("table.authors-list").find('input[name^="cubicvolume"]').each(function () {
        if($("table.authors-list").find('checkbox[name^="treated"]').checked){
            alert('10');
            grandTotaltreatedCubes += +$(this).val();
    }

    });
    $("#grandtotaltreatedcubes").text(grandTotaltreatedCubes.toFixed(2));
}

一如既往的帮助。

更新

渲染后的 HTML 输出[添加了 1 个动态行]：（仍在开发中，非常粗糙，请见谅）

<table class="authors-list" border=1>
  <thead>
    <tr>
      <td></td><td>Product</td><td>Price/Cube</td><td>Qty</td><td>line total cost</td><td>Discount</td><td>Cubes per bundle</td><td>pcs per bundle</td><td>cubic vol</td><td>Bundles</td><td><input type="checkbox" class="checkall"> Treated</td>
    </tr>
  </thead>
  <tbody>
    <tr>
     <td><a class="deleteRow"> <img src="http://devryan.tekwani.co.za/application/assets/images/delete2.png" /></a></td>
     <td><input type="text" id="product" name="product" />
     <input type="hidden" id="price" name="price" readonly="readonly"/></td>
     <td><input type="text" id="adjustedprice" name="adjustedprice" /></td>
     <td><input type="text" id="qty" name="qty" /></td>
     <td><input type="text" id="linetotal" name="linetotal" readonly="readonly"/></td>
     <td><input type="text" id="discount" name="discount" /></td>
     <td>
        <input type="text" id="cubesperbundle" name="cubesperbundle" >
    </td>
    <td>
        <input type="text" id="pcsperbundle" name="pcsperbundle" >
    </td>
    <td>
        <input type="text" id="cubicvolume" name="cubicvolume"  size='5' disabled>
    </td>
     <td><input type="text" id="totalbundles" name="totalbundles" size='5' disabled ></td>
    <td valign="top" ><input type="checkbox" id="treated" name="treated" ></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
        <td colspan="15"><input type="button" id="addrow" value="Add Product" /></td>
    </tr>
    <tr>
        <td colspan="3">Grand Total: R<span id="grandtotal"></span></td>
        <td colspan="2">Ave Discount: <span id="avediscount"></span>%</td>
        <td colspan="1">Total Cubes: <span id="grandtotalcubes"></span></td>
        <td colspan="15">Treated Cubes: <span id="grandtotaltreatedcubes"></span></td>
    </tr>

    <tr>
        <td colspan="15"><textarea  rows="1" cols="50" placeholder="Specific Comments"></textarea><textarea  rows="1" cols="20" placeholder="Customer Reference"></textarea>
</td>
    </tr>
  </tfoot>
</table>
4

5 回答 5

2

首先转到父 tr 然后使用 find 查找当前行中的复选框，并使用 DOM 对象而不是 jQuery 对象进行检查，您可以使用索引器将 jQuery 对象转换为 DOM 对象。

改变

if($("table.authors-list").find('checkbox[name^="treated"]').checked){

到

if($(this).closest('tr').find('checkbox[name^="treated"]')[0].checked){
于 2013-04-05T10:02:31.390 回答
2

checked是实际 DOM 元素的属性，而您拥有的是 jQuery 元素。你需要改变这个：

$("table.authors-list").find('checkbox[name^="treated"]').checked

对此：

$("table.authors-list").find('checkbox[name^="treated"]')[0].checked
                                                         -^- // get DOM element

或者更多的 jQuery 风格：

$("table.authors-list").find('checkbox[name^="treated"]').is(':checked')
于 2013-04-05T10:02:38.303 回答
1

更改以下行

if($("table.authors-list").find('input[name^="treated"]').checked){

对此

if($("table.authors-list").find('input[name^="treated"]').is(':checked')){
于 2013-04-05T10:03:31.187 回答
1

$("table.authors-list").find('checkbox[name^="treated"]:checked')您可以使用和使用最接近它的输入值（假设在同一行）遍历“选中”复选框。

假设您的表格有很多行，每行都有一个复选框和一个输入，您可以使用：

function calculateTotalTreatedVolume() {
    var grandTotaltreatedCubes = 0;

    // iterate through the "checked" checkboxes
    $("table.authors-list").find('input[type="checkbox"][name^="treated"]:checked').each(function () {

        // use the value of the input in the same row
        grandTotaltreatedCubes += +$(this).closest('tr').find('input[name^="cubicvolume"]').val();

    });
    $("#grandtotaltreatedcubes").text(grandTotaltreatedCubes.toFixed(2));
}
于 2013-04-05T10:05:03.500 回答
1

试试这个：

var grandTotaltreatedCubes = 0;

// Cache the table object here for faster processing of your code..
var $table = $("table.authors-list");

$table.find('input[name^="cubicvolume"]').each(function () {

    // Check if checkbox is checked or not here using is(':checked')
    if ($table.find('checkbox[name^="treated"]').is(':checked')) {
        grandTotaltreatedCubes += $(this).val();
    }
});

$("#grandtotaltreatedcubes").text(grandTotaltreatedCubes.toFixed(2));
于 2013-04-05T10:12:22.147 回答