jQuery遍歷表並選擇下拉列表

Question

我有我認爲會是一個簡單的任務。

下拉列表的表，並且在每一行的末尾的文本框。

所有我想要做的是通過表的每一行循環，獲得了「小時下拉值」，並通過了「速度下拉值」乘以 - 並將結果存放在文本框中。

我只是不停地試圖讓下拉列表值時，越來越不確定。

我的HTML是：

<table class="hours-table"> 
<tr> 
    <th>Hours</th> 
    <th>Hourly Rate</th> 
    <th>Date Total</th> 
</tr> 
<tr> 
    <td> 
     <select id="HoursSelected1" name="HoursSelected" class="hours"> 
      <option value="1">1</option> 
      <option value="2">2</option> 
     </select> 
    </td> 
    <td> 
     <select id="RateSelected1" name="RateSelected" class="rate"> 
      <option value="1">1</option> 
      <option value="2">2</option> 
     </select> 
    </td> 
    <td class="date-total"> 
     <input type="text" class="date-total" name="date-total-01" value="" /> 
    </td> 
</tr> 
<tr> 
    <td> 
     <select id="HoursSelected2" name="HoursSelected" class="hours"> 
      <option value="1">1</option> 
      <option value="2">2</option> 
     </select> 
    </td> 
    <td> 
     <select id="RateSelected2" name="RateSelected" class="rate"> 
      <option value="1">1</option> 
      <option value="2">2</option> 
     </select> 
    </td> 
    <td class="date-total"> 
     <input type="text" class="date-total" name="date-total-01" value="" /> 
    </td> 
</tr> 
<tr> 
    <td> 
     <select id="HoursSelected3" name="HoursSelected" class="hours"> 
      <option value="1">1</option> 
      <option value="2">2</option> 
     </select> 
    </td> 
    <td> 
     <select id="RateSelected3" name="RateSelected" class="rate"> 
      <option value="1">1</option> 
      <option value="2">2</option> 
     </select> 
    </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> 

我jQuery是：

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

任何人都可以看到我已經錯了嗎？這裏有一個小提琴：http://jsfiddle.net/Lr5pq/26/

謝謝你，馬克

Answer 1

你在你的代碼2的問題，首先是忽略了第一行（表頭行）在你的計算，第二使用return false;它被廢棄了，我們用e.preventDefault();，相反，你可以解決這些問題，如：

 $('.hours-table tr').each(function() { 
      var hours = $(this).find('select.hours').val(); 
      var rate = $(this).find('select.rate').val(); 
      if (hours !== undefined && rate !== undefined) { 
       var dateTotal = (hours * rate); 
       $(this).find('input.date-total').val(dateTotal); 
      } 
     }); 
     e.preventDefault(); 

順便說一句，如果我疫情週報Ë我會改變它像：

$(document).ready(function() { 
    $('.calculate').on('click', function (e) { 
     $('.hours-table tr').each(function() { 
      var hours = $(this).find('select.hours>option:checked').val(); 
      var rate = $(this).find('select.rate>option:checked').val(); 

      //this is for your header row 
      if (hours !== undefined && rate !== undefined) { 
       var dateTotal = (hours * rate); 
       $(this).find('input.date-total').val(dateTotal); 
      } 
     }); 
     e.preventDefault(); 
    }); 
}); 

正如你看到的，我們可以用:checked而不是:selected，選擇在選擇節點所選擇的選項。

，這是你的工作jsfiddle

Answer 2

試試這個：

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