Question

我有下表

<table class="authors-list" border=0 id="ordertable">
    <tr>
        <td>Cubic Meters</td><td>Cubes per Bundle</td><td>Total Bundles</td>
    <tr>
       <td><input type="text" name="cubicmeters1" id="cubicmeters1" value="1.38"></td>
       <td><input type="text" name="cubesperbundle1" id="cubesperbundle1" value="1.485"></td>
       <td><input type="text" name="bundles1" id="bundles1"></td>
    </tr>
    <tr>
       <td><input type="text" name="cubicmeters2" id="cubicmeters2" value="1.38"></td>
       <td><input type="text" name="cubesperbundle2" id="cubesperbundle2" value="1.485"></td>
       <td><input type="text" name="bundles2" id="bundles2"></td>
    </tr>
    <tr>
       <td><input type="text" name="cubicmeters3" id="cubicmeters3" value="1.38"></td>
       <td><input type="text" name="cubesperbundle3" id="cubesperbundle3" value="1.485"></td>
       <td><input type="text" name="bundles3" id="bundles3"></td>
   </tr>
</table>

我想要做的是遍历每个表行并对两个输入执行数学函数，并将结果填充到第三个输入中。

小提琴在这里：http://jsfiddle.net/ttZtX/1/

所以这是我对jquery的尝试：

$("table.authors-list").find('input[name^="cubicmeters1"]').each(function () {
    cubes += +$(this).closest('tr').find('input[name^="cubicmeters"]').val();
    cubesperbundle += +$(this).closest('tr').find('input[name^="cubesperbundle"]').val();
    +$(this).closest('tr').find('input[name^="bundles"]').val((cubes*cubesperbundle).toFixed(2));
});

这不会产生任何结果或错误，并且不会填充输入。

总结一下，我的要求是让jquery循环遍历每一行，将cubicmeters乘以cubesperbundle并将bundles填入结果。

很简单，但我不能正确。

任何帮助都将不胜感激。

提前致谢...

Answer 1

这是你在找什么？ http://jsfiddle.net/WrvmW/

$("table.authors-list tr").each(function () {
   var cubes = parseFloat($('input[name^="cubicmeters"]',this).val(), 10);
    var cubesperbundle = parseFloat($('input[name^="cubesperbundle"]',this).val(), 10);
    $('input[name^="bundles"]',this).val((cubes*cubesperbundle).toFixed(2))

});

您的javascript中存在一些错误，您需要parseFloat才能执行操作。另一件事是你不必通过each输入并找到closest来使其复杂化。您可以直接遍历tr s。

Answer 2

您在小提琴中选择了No wrap - in <head>，因此尚未创建您尝试选择的元素，请尝试将其更改为onDomready
同时删除1中的$("table.authors-list").find('input[name^="cubicmeters1"]')以选择所有输入而不只是一个，并在变量之前添加var，以便它们不会泄漏到全局范围

$("table.authors-list").find('input[name^="cubicmeters"]').each(function () {
    var cubes = +$(this).closest('tr').find('input[name^="cubicmeters"]').val();
    var cubesperbundle = +$(this).closest('tr').find('input[name^="cubesperbundle"]').val();
    $(this).closest('tr').find('input[name^="bundles"]').val((cubes*cubesperbundle).toFixed(2));
});

http://jsfiddle.net/ttZtX/19/

Answer 3

您的javascript中出现错误：

$("table.authors-list").find('input[name^="cubicmeters1"]').each(function () {
    // you haven't declared cubes
    // you have a + in front of $
    // you're not parsing the string (use parseFloat)
    cubes += +$(this).closest('tr').find('input[name^="cubicmeters"]').val();
    cubesperbundle += +$(this).closest('tr').find('input[name^="cubesperbundle"]').val();
    +$(this).closest('tr').find('input[name^="bundles"]').val((cubes*cubesperbundle).toFixed(2));
});

以下内容应该有效：

$(function(){       
        $("table.authors-list").find('input[name^="cubicmeters1"]').each(function () {
            var cubes;
            var cubesperbundle;
            cubes = parseFloat($(this).closest('tr').find('input[name^="cubicmeters"]').val());
            cubesperbundle = parseFloat($(this).closest('tr').find('input[name^="cubesperbundle"]').val());
            $(this).closest('tr').find('input[name^="bundles"]').val((cubes*cubesperbundle).toFixed(2));
        });
});

Answer 4

当然，如果由于某些原因（如更复杂的计算）而更改表结构，则总会有另一种方法，例如使用id选择器解决问题。你可以在以下地址看到它：

http://jsfiddle.net/ttZtX/24/

或在这里

$('input[name^="bundles"]').each(function () {
  var id = $(this).attr('id').replace("bundles", "");

  var cubes = +$("#cubicmeters" + id).val();

  var cubesperbundle = +$("#cubesperbundle" + id).val();

  $(this).val((cubes*cubesperbundle).toFixed(2));
});

其中每个捆绑包已经携带了其ID号，因此您可以找到相关数量的项目并将其添加到计算逻辑中。

jquery遍历每个表行并对每个行输入字段执行数学运算

4 个答案: