javascript - 如何制作折叠表行(也支持 IE8)？

Question

我希望当用户单击“单击此处查看更多行”之类的内容时折叠并折叠表格的最后两行。这将显示为前两行的最后一行，如果用户想要将它们折叠回去，则会变成一些切换按钮。

了解后there's no way to do this仅通过 CSS2，我想如果我也想要 IE8 支持，我需要使用 javascript/jquery。

我找到了一个 jquery Accordion 示例并尝试在表格上实现它，但它并没有真正起作用。

Here's a fiddle

尝试用 <div class="open" 结束最后两行>` 但它没有用(几乎不了解 jquery，只是想为网站修补它)。

在 IE7 上，如果不可能，我希望所有行从一开始就折叠起来。

HTML:

 <table border="1">
    <col style="width:120px;" />
    <col style="width:120px;" />
    <col style="width:120px;" />
    <col style="width:120px;" />
    <col style="width:120px;" />
    <thead>
      <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
      </tr>
    </thead>
    <tbody>
      <tr class="open">
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
        <td>e</td>
      </tr>
      <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
        <td>e</td>
      </tr>
      <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
        <td>e</td>
      </tr>
    </tbody>
  </table>

JavaScript:

$(document).ready(function () {
    $('table').accordion({collapsible: true,active: false,header: '.open' });
});

Answer 1

http://jsfiddle.net/4rkkksmd/4/

JavaScript:

$('tr.btn td').click(function(){
    $('tr.hidden .slide').toggle(200)
});

html:

<table border="1">
    <thead>
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5asdfasdfasdf</th>
    </tr>
    </thead>
    <tbody>
    <tr class="btn">
        <td colspan="5">Click me</td>
    </tr>
    <tr class="hidden">
        <td>
            <div class="slide">
                asd
            </div>
        </td>
        <td>
            <div class="slide">
                asd
            </div>
        </td>
        <td>
            <div class="slide">
                asd
            </div>
        </td>
        <td>
            <div class="slide">
                asd
            </div>
        </td>
        <td>
            <div class="slide">
                asd
            </div>
        </td>
    </tr>
    <tr class="hidden">
        <td>
            <div class="slide">
                asd
            </div>
        </td>
        <td>
            <div class="slide">
                asd
            </div>
        </td>
        <td>
            <div class="slide">
                asd
            </div>
        </td>
        <td>
            <div class="slide">
                asd
            </div>
        </td>
        <td>
            <div class="slide">
                asd
            </div>
        </td>
    </tr>
    <tr class="hidden">
        <td>
            <div class="slide">
                asd
            </div>
        </td>
        <td>
            <div class="slide">
                asd
            </div>
        </td>
        <td>
            <div class="slide">
                asd
            </div>
        </td>
        <td>
            <div class="slide">
                asd
            </div>
        </td>
        <td>
            <div class="slide">
                asd
            </div>
        </td>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
        <td>e</td>
    </tr>
    </tbody>
</table>