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來通過每個錶行循環，並與每行輸入字段

回答

相關問題