Question

我有一个贯穿桌子的脚本，不理想，但我需要让它工作。

表格字段cubicmeters和cubesperbundle由早期的脚本填充。

我需要做的是，现在遍历表并对每行的输入执行数学函数。

我有一个变量rows，它有行数，可以用于引用每一行的变量I.

for (var i = 1; i <= rows; i++) {

            var cubes = +$(this).closest('tr').find('input[name^="cubicmeters"+i]').val(); // reference the row 'i'
            var cubesperbundle = +$(this).closest('tr').find('input[name^="cubesperbundle"]').val();
            $(this).closest('tr').find('input[name^="bundles"]').val((cubes*cubesperbundle).toFixed(2));

}

需要注意的一点是，此查询不在头部，而是在页面底部的脚本标记内。原因是该表填充了PHP，因此头部脚本将在加载输入之前运行。因此我将此脚本放在页面底部。此外，填充cubicmeters和cubesperbundle的jquery仅在PHP填充要填充cubicmeters和cubesperbundle回复的输入后运行。

顺序：PHP填充productcode。 jquery（从页面底部调用）根据cubicmeters填充cubesperbundle和productcode字段。这必须在加载页面时发生，而不需要任何用户触发器。

最后，我需要jquery脚本填充bundles字段，结果为cubesperbundle * cubicmeters

我的html beofre这个脚本必须运行：

<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>

jsfiddle在这里：http://jsfiddle.net/WfemC/

这显然不起作用，因此我的问题。

感谢您的帮助。

更新

for (var i = 1; i <= rows; i++) {
    (function (index) {
        $.post('get_sku_cubes', {
            data: $('#product' + index).val()
        }, function (result) {
            $('#cubicmeters+ index).val(result);
        });
    })(i)
}

for (var i = 1; i <= rows; i++) {
    (function (index) {
        $.post('get_cubesperbundle, {
            data: $('#product' + index).val()
        }, function (result) {
            $('#cubesperbundle+ index).val(result);
        });
    })(i)
}


$('#ordertable tr').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^="totalbundles"]').val((cubes*cubesperbundle).toFixed(2));
});

由于

Answer 1

由于.each()循环没有获得for

，您使用$(this)这一切都是错误的

Working DEMO

修改

<强> HTML

<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>

jQuery代码

$('#ordertable tr').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)); });

Answer 2

你可以使用jQuery中的.each()函数在每一行上循环，然后你可以在每个循环上使用$(this)来处理当前行。

Fiddle example.

编辑： Updated Fiddle，功能分开

jquery遍历行并执行数学函数

2 个答案:

Working DEMO