jQuery 循环遍历表格单元格

Question

我有一个 id=main 的表格...希望将每行中的两个单元格添加在一起，然后对另一行执行相同的操作，等等。但是，虽然我已经设法对第一行执行此操作，但所有以下行中的结果单元格相同。例如，表中所有单元格的 'test' = 102.9...顺便说一句，一直在研究 .each() 但不确定如何实现..

<tr id='main'>
<td class='rtng'>100</td>
<td class='win'>2.90</td>
<td class='test'></td></tr>

<tr id='main'>
<td class='rtng'>95</td>
<td class='win'>4.25</td>
<td class='test'></td></tr>

这是我的 jQuery

$(document).ready(function() {
    var num1 = $(".rtng").html();
    var num2 = $(".win").html();
    var result = parseFloat(num1) + parseFloat(num2);
    $(".test").html(result);
});​

再次尝试

$(document).ready(function() {
    $('tr.rtng').each(function() {
        var num1 = $(".rtng").html();
        var num2 = $(".win").html();
        var result = parseFloat(num1) + parseFloat(num2);
        $(".test").html(result);
    });
});​

任何帮助都会很高兴:)

Answer 1

首先，您的 HTML 无效。没有<table>元素和你有相同的 id 使用两次 - id 是唯一的。让你的 HTML 像这样:

<table id="tableMain">
    <tr>
        <td class='rtng'>100</td>
        <td class='win'>2.90</td>
        <td class='test'></td>
    </tr>
    <tr>
        <td class='rtng'>95</td>
        <td class='win'>4.25</td>
        <td class='test'></td>
    </tr>
</table>

然后在 jQuery 中:

$(document).ready(function() {         
    $('#tableMain tr').each(function() {
        var $this = $(this);
        $this.find('.test').text(parseFloat($this.find('.rtng').text()) + parseFloat($this.find('.win').text()));
    });
});​