javascript - 来自 html 表的下拉菜单

Question

我对 HTML 表格有疑问。是否可以在 HTML 表格中创建下拉菜单？我想显示这样的东西：

1 video1 cam1  signal-present
2 video2 cam2  signal-present
3 video3 cam3  signal-present

当我单击任何一行时，它应该展开以提供另一组行，例如：

1 video1 cam1  signal-present
  -1 Audio1 source1 present
  -2 Audio1 source1 present
2 video2 cam2  signal-present
3 video3 cam3  signal-present

该表是使用 Javascript 填充的。有没有比表格更好的方法来做到这一点。

Answer 1

您所描述的是jQuery Accordion功能。那里有大量的手风琴插件，但它们都做同样的事情：

工作示例：http: //jsfiddle.net/7vX3S/5/

• 点击类（这是默认显示的）
• 内容类（这click class是单击时显示的内容

所以，你会做<tr>你的click class，当<tr>点击给定的时候，你会有另一个<tr>向下滑动（展开）。

jQuery：

  $(".clicker").on("click", function(){
    if($(this).next().hasClass("down")){
        $(this).next().slideUp("normal").removeClass("down");
    }
    else{
       $(this).next().slideDown("normal").addClass("down");
    }
});

HTML：

<table>
    <tr class="clicker">
        <td>some data</td>
    </tr>
    <tr class="hidden">
        <td>Some new data here</td>
    </tr>
</table>

CSS：

tr.hidden{

    display: none;
}