0

鉴于此html：

<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

请问，我在这个循环中做错了什么？

4

2 回答 2

5

return false;在循环中使用$.each将退出它。我认为您的意思是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 
});

演示：http: //jsfiddle.net/Lr5pq/1/

更新：

获取undefinedand的问题NaN是因为这是选择所有<tr>元素 - 包括您的标题行：

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

由于您的循环在第一行之后立即退出（第一行是标题行），因此任何console.log/debugging 都是针对标题行的。因此，当然不会找到任何元素。要解决这个问题，您应该使用<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>行）

演示：http: //jsfiddle.net/Lr5pq/4/

于 2013-04-03T16:59:00.163 回答
0

你可以使用以下。

 $("#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

});

于 2014-12-02T17:37:33.390 回答