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 - ids是唯一的。像这样制作你的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()));
    });
});

Answer 2

您可以选择所有.test元素并通过调用.html()并传入计算正确值的函数来设置其内容：

$(".test").html(function () {
    // `this` refers to the current `.test` element...
    var num1 = parseFloat($(this).siblings(".rtng").html()),
        num2 = parseFloat($(this).siblings(".win").html());
    return num1 + num2;
});

这是working example。

附注：正如其他人所提到的，id属性的值在文档中必须是唯一的。

Answer 3

首先，您使用了两次相同的ID，这会产生问题。为行提供唯一ID或将其更改为类。假设你去上课，我会做类似的事情：

$('tr.main').each(function() {
    var num1 = $(this).children('.rtng').text();
    var num2 = $(this).children('.win').text();
    var result = parseFloat(num1) + parseFloat(num2);
    $(this).children('.test').text(result);
});

您需要在行的上下文中选择每个tds，因此子函数。

jQuery循环遍历表格单元格

3 个答案: