选择表格列 (jQuery)答案

【问题标题】：Selecting table columns (jQuery)选择表格列 (jQuery)
【发布时间】：2010-12-01 19:46:27
【问题描述】：

我想为 FIRST 和 LAST 列的所有（包括<th>）单元格提供一些特定的类，我试过这个：

$("table tr:first-child td:first-child").addClass("first-col-cell");
$("table tr:last-child td:last-child").addClass("last-col-cell");

..但它似乎不起作用。

不胜感激。

【问题讨论】：

标签： jquery select html-table cell

【解决方案1】：

如果 th 元素很重要...也不知道您想如何处理 colspan。

<!doctype html>
<table>
    <tr>
    <th></th>
    <td>blah</td>
        <td></td>
    </tr>
    <tr>
        <td colspan="2"></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
    <td>blah</td>
        <td></td>
    </tr>
    <tr>
        <td></td>
    <td>blah</td>
        <td></td>
    </tr>
</table>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
      $("table tr :first-child").text('first').css('background', 'yellow');
      $("table tr :last-child").text('last').css('background', 'brown');
    });
</script>

【讨论】：

【解决方案2】：

试着分解一下，你做的遍历是不正确的

// This will take the first child which is a TD, within any TR in the table.
$("table tr td:first-child").addClass("first-col-cell");

// This will take the first child which is a TR within the table.
$("table tr:first-child").addClass("first-col-cell");

// Just like the above, except now we're doing the last occurances
$("table tr td:last-child").addClass("last-col-cell");
$("table tr:last-child").addClass("last-col-cell");

然后我们只需要确保标记都很好

<table>
<tr>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
</tr>
<tr>
    <td>2</td>
    <td>2</td>
    <td>2</td>
    <td>2</td>
</tr>
<tr>
    <td>3</td>
    <td>3</td>
    <td>3</td>
    <td>3</td>
</tr>

然后jQuery应该遍历每一个，结果如下

<table>
    <tr class="first-col-cell">
        <td class="first-col-cell">1</td>
        <td>1</td>
        <td>1</td>
        <td class="last-col-cell">1</td>
    </tr>
    <tr>
        <td class="first-col-cell">2</td>
        <td>2</td>
        <td>2</td>
        <td class="last-col-cell">2</td>
    </tr>
    <tr class="last-col-cell">
        <td class="first-col-cell">3</td>
        <td>3</td>
        <td>3</td>
        <td class="last-col-cell">3</td>
    </tr>
</table>

【讨论】：

嗯，我以为您也尝试将代码应用于 TR 标签，至少从您的 jQuery sn-p 看起来是这样；)

【解决方案3】：

编辑：您的选择器非常接近：

<script type="text/javascript">
    $(function() {
        $("table tr td:first-child").text('hello');
        $("table tr td:last-child").text('goodbye');
    });
</script>

<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

【讨论】：

我想会选择什么，第一行和最后一行？我认为这不是 OP 想要的。
不，还是一样。仅选择找到的第一个单元格，我想将类应用于列中的所有单元格。谢谢。