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