1

我有下表

<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结果。

很简单，但我就是做不好。

任何帮助，将不胜感激。

提前致谢...

4

4 回答 4

3

这是你想要的？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. 可以直接遍历trs。

于 2013-04-24T22:26:52.803 回答
3

您No wrap - in <head>在小提琴中进行了选择，因此尚未创建您尝试选择的元素，请尝试将其更改为onDomready
Also remove the 1in$("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/

于 2013-04-24T22:27:37.550 回答
1

您的 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));
        });
});
于 2013-04-24T22:27:36.700 回答
1

当然，如果您出于某种原因（例如更复杂的计算）更改表结构，那么总会有另一种方法，例如解决 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 号，因此您可以找到相关数量的项目并将它们添加到您的计算逻辑中。

于 2013-04-24T22:35:52.683 回答