Question

我一直坚持这个问题一段时间了。我知道，要使表格行动画顺畅，您需要div s。我来到这个解决方案，我可以隐藏我想要的tablerow，但我不能让它再次出现。

我需要一些解决方案或者一些切换解决方案。

HTML：

<table>
    <tbody>
        <tr>
            <td class="clickme">
                Sample text
            </td>
            <td class="clickme">$10</td>
            <td class="clickme">$100</td>
            <td class="clickme">$0</td>
        </tr>
        <tr class="hideme">
            <td colspan="4">
                <div>
                    Sample text, sample text, sample text, sample text, sample text, sample text
                </div>
            </td>
        </tr>
        <tr>
            <td class="clickme">
                Sample text
            </td>
            <td class="clickme">$10</td>
            <td class="clickme">$100</td>
            <td class="clickme">$0</td>
        </tr>
        <tr class="hideme">
            <td colspan="4">
                <div>
                    Sample text, sample text, sample text, sample text, sample text, sample text
                </div>
            </td>
        </tr>
        <tr>
            <td class="clickme">
                Sample text
            </td>
            <td class="clickme">$10</td>
            <td class="clickme">$100</td>
            <td class="clickme">$0</td>
        </tr>
        <tr class="hideme">
            <td colspan="4">
                <div>
                    Sample text, sample text, sample text, sample text, sample text, sample text
                </div>
            </td>
        </tr>
        <tr>
            <td class="clickme">
                Sample text
            </td>
            <td class="clickme">$10</td>
            <td class="clickme">$100</td>
            <td class="clickme">$0</td>
        </tr>
        <tr class="hideme">
            <td colspan="4">
                <div>
                    Sample text, sample text, sample text, sample text, sample text, sample text
                </div>
            </td>
        </tr>
    </tbody>
</table>

Jquery的：

$('.hideme').find('div').hide();
$('.clickme').click(function() {
    $(this).parent().next('.hideme').find('div').slideToggle(500);
    return false;        
});

正确的标记和Jquery已更新。最终的JSFiddle：http://jsfiddle.net/NVx4S/21/

Answer 1

<table>
    <tbody>
        <tr>
            <td id="content-1" class="clickme">
                Sample text
                <!-- <a href="#content-1" class="clickme">Sample text</a> -->
            </td>
            <td>$10</td>
            <td>$100</td>
            <td>$0</td>
        </tr>
        <tr>
           <td colspan="4">
               <div id="slide-content-1">
                  Sample text, sample text, sample text, sample text, sample text, sample text
               </div>
           </td>
        </tr>
    </tbody>
</table>

    $('.clickme').click(function() {
        //$(this.hash).slideToggle(500);
        $('#slide-'+this.id).slideToggle(500);
        return false;        
    });

Answer 2

我稍微编辑了你的JSFiddle。它对你有帮助吗？

http://jsfiddle.net/NVx4S/7/

表行在jQuery中切换

2 个答案: