2

有人问过类似的问题，但我不确定它们是否符合这种特殊情况，

我有一个 html 表格，如下所示。我想要实现的是隐藏/显示第 2 列和第 3 列，只要在第 1 列的任意位置单击。

如何使用 jQuery 切换显示第 2 列和第 3 列？

<table id="my_table">
    <thead>
        <tr>
            <th id="col1">First</th>
            <th id="col2">Second</th>
            <th id="col3">Third</th>
            <th id="col4">Fourth</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td id="col1">1</td>
            <td id="col2">1.1</td>
            <td id="col3">1.2</td>
            <td id="col4">1.3</td>
        </tr>
        <tr>
            <td id="col1">2</td>
            <td id="col2">2.1</td>
            <td id="col3">2.2</td>
            <td id="col4">2.3</td>
        </tr>
        <tr>
            <td id="col1">3</td>
            <td id="col2">3.1</td>
            <td id="col3">3.2</td>
            <td id="col4">3.3</td>
        </tr>
        <tr>
            <td id="col1">4</td>
            <td id="col2">4.1</td>
            <td id="col3">4.2</td>
            <td id="col3">4.3</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th id="col1">f1</th>
            <th id="col2">f2</th>
            <th id="col3">f3</th>
            <th id="col4">f4</th>
        </tr>
    </tfoot>
</table>
4

2 回答 2

3 
var rows = $('tr');
rows.find('th:first-child, td:first-child').on('click', function() {
    rows.find('td:eq(1), td:eq(2)').toggle()
    rows.find('th:eq(1), th:eq(2)').toggle()

    /* or simply 
       rows.find('td:eq(1), td:eq(2), th:eq(1), th:eq(2)').toggle(); */
});

示例 jsbin：http: //jsbin.com/ucewoz/2/edit

于 2012-09-26T10:03:27.373 回答
1

您不能在每一行中使用相同的 ID。ID 必须是唯一的。您应该改用类。然后你可以写：

$('.col1').click(function() {
    $('.col2, .col3').toggle();
});
于 2012-09-26T11:05:50.630 回答