Question

鉴于此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>

我正在尝试遍历行，获取每行中的小时和费率值，将它们相乘并在“date-total”输入中设置该值（不一定必须是总数的输入）但我也将对多列进行另一次计算）

为什么一千次试图获得这些价值的人都没有工作，例如：

$('.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

在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 
});

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

<强>更新

获取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

}）;

循环表行，计算（乘）输入值，在另一个输入中设置结果

2 个答案: