Question

已经提出了类似的问题，但我不确定它们是否符合这一特定情况，

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

如何使用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>

Answer 1

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

Answer 2

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

$('.col1').click(function() {
    $('.col2, .col3').toggle();
});

用jQuery隐藏html表的中间列

2 个答案: