Javascript 切换表行和组元素

Question

我有一个这样的表: http://jsfiddle.net/uow54mex/1/它是一个非常简单的表格，例如

<table>
<thead>
<tr><th>....</...></thead>
<tr><td>....
</table>

我想按名称自动对所有表行进行分组，因此在最左边的列中每个用户应该只有一次。如果访问者单击某个用户，该行应该展开并且用户 1 的所有条目都应该可见。

我不知道如何使用 Javascript，所以我会接受任何建议。如果它很重要:该表显示在一个 php 页面中，并使用 SQL 查询动态填充。

Answer 1

您可以使用 jQuery.DataTable带有 Row Grouping Add-on 的插件:

$(document).ready(function () {
    $('#example').dataTable({
        "bLengthChange": false,
        "bPaginate": false,
        "bJQueryUI": true
    }).rowGrouping({
        bExpandableGrouping: true,
        bExpandSingleGroup: false,
        iExpandGroupOffset: -1,
        asExpandedGroups: [""]
    });
});

两个项目的文档都很齐全。

jsFiddle