-1

動的に入力されるテーブルがあります。構造は次のようになります。

<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最初のをクリックしたときに、2番目と3番目を上下にスライドさせたいですtd。

4

2 に答える 2

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();
    });
});​
于 2012-08-30T10:29:10.440 に答える
0 
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/

于 2012-08-30T10:44:53.817 に答える