遍歷錶行，計算（乘）輸入值，設置導致另一個輸入

Question

鑑於這個網站：

<table class="hours-table"> 
    <tr> 
     <th>Hours</th> 
     <th>Hourly Rate</th> 
     <th>Date Total</th> 
    </tr> 
    <tr> 
     <td class="hours"><input type="text" class="hours" name="hours-01" value="" /></td> 
     <td class="rate"><input type="text" class="rate" name="rate-01" value="" /></td> 
     <td class="date-total"><input type="text" class="date-total" name="date-total-01" value="" /></td> 
    </tr> 
</table> 

<p><a class="calculate" href="#" title="calculate row">Calculate</a></p> 

我通過行試圖循環，讓每一行的時間和速率值，將它們相乘並在「日期 - 總計」輸入中設置該值（不一定必須是總計的輸入，但我將對多個列進行另一次計算）

抓我的頭幾個小時爲什麼千次嘗試獲得這些值不起作用，例如：

$('.calculate').on('click', function() { 
    $('.hours-table tr').each(function() { 
     var hours = $(this).find('input.hours').val(); // nope 
     var hours = $('input.hours', this).val(); // nope 
     var hours = $('input.hours', $this).val(); // nope 
     //var dateTotal = (hours * rate); 
     //$(this).find('input.date-total').val(dateTotal); 
     return false; 
    }) //END .each 
}) // END click 

請問，我到底在做什麼這個循環錯了？

Answer 1

在$.each循環中使用return false;將退出它。我認爲你的意思是return false;用於click處理程序 - 以防止<a>的默認行爲並停止事件傳播。所以，如果你移動return false;了一個級別，它似乎工作：

$(document).ready(function() { 
    $('.calculate').on('click', function() { 
     $('.hours-table tr').each(function() { 
      var hours = $(this).find('input.hours').val(); 
      var rate = $(this).find('input.rate').val(); 
      var dateTotal = (hours * rate); 
      $(this).find('input.date-total').val(dateTotal); 
     }); //END .each 
     return false; 
    }); // END click 
}); 

DEMO：http://jsfiddle.net/Lr5pq/1/

UPDATE：

與得到undefined和NaN的問題，因爲這是選擇所有<tr>元素 - 包括您的標題行：

<tr> 
    <th>Hours</th> 
    <th>Hourly Rate</th> 
    <th>Date Total</th> 
</tr> 

由於您的循環在第一行之後立即退出（其中第一行是標題行），因此任何console.log /調試都用於標題行。所以當然，不會找到任何元素。要解決這個問題，你應該使用<thead>和<tbody>來分開目的。所以，你的表應該是這樣的：

<table class="hours-table"> 
    <thead> 
     <tr> 
      <th>Hours</th> 
      <th>Hourly Rate</th> 
      <th>Date Total</th> 
     </tr> 
    </thead> 

    <tbody> 
     <tr> 
      <td class="hours"><input type="text" class="hours" name="hours-01" value="" /></td> 
      <td class="rate"><input type="text" class="rate" name="rate-01" value="" /></td> 
      <td class="date-total"><input type="text" class="date-total" name="date-total-01" value="" /></td> 
     </tr> 
    </tbody> 
</table> 

和你tr選擇應該是：

$('.hours-table').find('tbody').find('tr').each(function() { 

（我喜歡用.find()，而不是一個長期選擇，但問題是，你的tbody部件添加到目標只是<tbody>行）

DEMO：http://jsfiddle.net/Lr5pq/4/

Answer 2

您可以使用以下內容。

$("#hours-table tr").each(function() { 
    var hours = $(this).find(".hours input").val(); 
    var rate = $(this).find(".rate input").val(); 
    var total= (hours * rate); 
    $(this).find(".total input").val(total); // Updates text box 

}）;