2

同様の質問が寄せられていますが、この特定のシナリオに一致するかどうかはわかりません。

以下のような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>
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 に答える