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();
});

更新： 请执行以下操作：fiddle

<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 CODE

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

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