来自html表的下拉菜单

时间:2013-03-29 16:49:56

标签: javascript html-table

我对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填充表格。有没有比表更好的方法来做到这一点。

1 个答案:

答案 0 :(得分:1)

您所描述的是jQuery Accordion功能。有很多手风琴插件,但它们都做同样的事情:

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

  • 点击课程(这是默认显示的内容)
  • 内容类(这是在点击click class时显示的内容

因此,您可以<tr> click class <tr>,当点击给定的<tr>时,您会有另一个 $(".clicker").on("click", function(){ if($(this).next().hasClass("down")){ $(this).next().slideUp("normal").removeClass("down"); } else{ $(this).next().slideDown("normal").addClass("down"); } }); 向下滑动(展开)。

jQuery的:

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

<强> HTML:

tr.hidden{

    display: none;
}

<强> CSS:

{{1}}