用jQuery求表中某些单元格的值

Question

如何在table中获取div中特定单元格的值？不幸的是，我似乎找不出一个人怎么做，谷歌也帮不了我。

示例：

<div class="s3">
    <table id="content" cellpadding="3" cellspacing="0">
        <tr>
            <td>cell 1</td>
            <td>cell 2</td>
            <td>cell 3</td>
        </tr>
    </table>
</div>
<div class="s3">
    <table cellpadding="3" cellspacing="0">
        <tr>
            <td>cell 1</td>
            <td>cell 2</td>
            <td>cell 3</td>
        </tr>
    </table>
</div>
<div class="s3">
    <table cellpadding="3" cellspacing="0">
        <tr>
            <td>cell 1</td>
            <td>cell 2</td>
            <td>cell 3</td>
        </tr>
    </table>
</div>

<script>

    $(document).ready(function () {
        var count = $(".s3").length;

        for (var i = 0; i++; i < count) {
            $(".s3 div:eq(i) td:eq(0)").html("12345678");
        }
    });

</script>

我想一次更改all first 的值，但它不起作用。

我做错了什么？

Answer 1

为什么您的代码不工作

构建选择器的方式并不像您期望的那样工作。在用"div:eq(i)"编写JavaScript时，字符串将包含实际字符i ("div:eq(i)")，而不是变量i的当前值(例如"div:eq(2)")。

解决方案1

有两种方法可以实现你想要达到的目标。第一个变量与代码中的方式相同，但使用变量构建选择器字符串：

for (var i = 0; i++; i < count) {
    $(".s3 div:eq(" + i + ") td:eq(0)").html("12345678");
}

这将按照您的意愿将变量i的值填充到选择器中，但不会工作，因为选择器.s3 div与中的与class="s3"匹配。

<div class="s3">
    <div>div you are targeting now</div>
</div>

若要选择具有类s3本身的div，可以使用div.s3或省略元素标记，并仅通过.s3使用类进行选择。

for (var i = 0; i++; i < count) {
    $("div.s3:eq(" + i + ") td:eq(0)").html("12345678");
}

解决方案2

但是，使用jQuery，您还可以选择所有div的第一列并更改text/html

所有的都是，而不需要对它们进行循环：

$(".s3 td:first-child").text("12345678");

• 使用text()代替.html()，因为您正在插入文本，而不是HTML。
• 直接选择要更改的所有<td>。
• 使用:first-child (浏览器支持)而不是:eq(0) (只支持jQuery)。 对于这个小例子来说，这并不重要，但是使用HTML标准的选择器选择使用浏览器的原生DOM引擎来选择元素，而不是使用速度较慢的jQuery特定的选择器引擎，而且在更大的实际应用程序中会更快一些。
• 移除for循环，因为jQuery可以为您做到这一点。

学习jQuery玩得开心！