javascript - jQuery仅隐藏表格中的一部分

Question

我有一个将动态填充的表，结构如下：

<table>
<tr>
<td> The </td><td> Fields </td><td> To </td><td>Be</td><td>visible</td>
</tr>
<tr>

和相同的结构 2 次，但它必须在加载和单击时隐藏，并在单击时显示

</tr>
... the other trs ...

<table>

当我单击第一个时，我希望第二个和第三个tds向下和向上滑动td。

Answer 1

$('table > tr > td').first().bind('click', function (event) {
    $(this).next().slideToggle().next().slideToggle();
});

更新：使用以下内容：小提琴

<table>
    <thead><!-- Clickable Header --></thead>
    <tbody>
    <tr><!-- Content --></tr>
    <tr><!-- Content --></tr>
    </tbody>
</table>

JS：

$(document).ready(function () {
    $('table tbody').css('display', 'none');
    $('table thead').click(function (event) {
        $('table tbody').slideToggle();
    });
});​

Answer 2

You can try this

HTML

<table>
    <tr>
        <td class="clickitem">
            The
        </td>
        <td>
            Fields
        </td>
        <td>
            To
        </td>
        <td>
            Be
        </td>
        <td>
            visible
        </td>
    </tr>
</table>

JS代码

$('.clickitem').on('click', function(){
    $(this).siblings().slideToggle();
});

http://jsfiddle.net/qYJ3B/9/