jQuery来通过每个表行循环，并与每行输入字段

执行数学我有如下表jQuery来通过每个表行循环，并与每行输入字段

<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并返回结果。

够简单，但我只是不能正确理解。

任何帮助，将不胜感激。

在此先感谢...

来源

2013-04-24 Smudger

你在你的提琴选择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/

来源

2013-04-24 22:27:37 Musa

谢谢穆萨。如果在身体本身，这可以工作。麻烦的是立方米和cubesperbundle由一个较早的jquery函数填充，这是在体内运行，所以我需要在输入填充后触发该脚本。谢谢 – Smudger 2013-04-25 06:40:23

@Smudger代码在哪里并不重要，它在调用时很重要。你需要在dom加载完成后调用它（或者只是在加载元素时加载） – Musa 2013-04-25 06:44:02

谢谢。这是目前所有其他脚本的正文。我如何实现这一目标？其他输入由这个脚本填充：'for（var i = 1; i <= rows; i ++）{function（index）{'0'post（'get_sku_pieces'，{ data：$（'＃product '+指数）.VAL（） }，功能（结果）{ $（' ＃pcsperbundle” +指数）.VAL（结果）; }）;} ）（ⅰ） }' – Smudger 2013-04-25 06:49:40

这是你在找什么？ 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。

来源

2013-04-24 22:26:52 PSL

@Smudger为您做了解决方案吗？ – PSL 2013-04-24 22:37:15

嗨，它没有，可能是我的错，因为我没有提到这个脚本将在体内被调用。如果在身体本身，这可以工作。麻烦的是立方米和cubesperbundle由一个较早的jquery函数填充，这是在体内运行，所以我需要在输入填充后触发这个脚本。谢谢 – Smudger 2013-04-25 06:44:28

你已经在你的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-24 22:27:36 Kenneth

OP使用$前面的'+来将'val'返回的字符串转换为一个数字。 – Musa 2013-04-24 22:32:24

谢谢Kenneth。如果在身体本身，这可以工作吗？麻烦的是立方米和cubesperbundle由一个较早的jquery函数填充，这是在体内运行，所以我需要在输入填充后触发该脚本。谢谢 – Smudger 2013-04-25 06:40:51

当然有总是喜欢解决问题的另一种方式与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)); 
});

其中每个包已经携带其身份证号，以便您可以找到项目的相关数量，并将它们添加到您的计算逻辑。

来源

2013-04-24 22:35:52

谢谢kubarium。如果在身体本身，这可以工作。麻烦的是立方米和cubesperbundle由一个较早的jquery函数填充，这是在体内运行，所以我需要在输入填充后触发该脚本。谢谢 – Smudger 2013-04-25 06:41:20

这种技术可以在页面的任何地方工作，因为您选择的是ID而不是嵌套位置。为了回答你的其他问题，假设你有一个会触发这个计算的按钮，把所有这些代码放到该按钮的click事件处理程序中。所以，当它被点击时，它会尝试找到捆绑包，立方米等，即使它们在页面加载后被放入DOM中。你最终需要听起来像是一个不同的问题，所以你可能想打开一个新的线程，以便其他人可以很容易地找到它。它会在评论区域迷失在这里。 – 2013-04-26 01:41:00

jQuery来通过每个表行循环，并与每行输入字段

回答

相关问题