Javascript切换表行和组元素

我有一张这样的桌子： 这是一张非常简单的桌子

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

....
....

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

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

您可以将该插件与以下内容一起使用：

这两个项目的文档非常完整

---

在Vainlla JS中使用正确的HTML结构时，它会是这样的（）：

使用者
白天
小时
描述
部门
任务
子任务
用户1
2015-02-11 13:05:00
2
布拉布拉
标准
测试
睾丸素
用户1
2015-03-11 13:05:00
1
布拉
标准
煮咖啡
喝牛奶
彼得
2015-03-11 13:05:00
1
padsfs
某物
PB
测试

看起来您也需要处理html。这不是一个有效的表。好的，我加载了query-1.11.1.min.js和jquery.dataTables.min.js。我复制了您的代码片段并将其放在第三个标记中。通过在我的本地机器上测试它，出现了以下错误：未捕获的TypeError:$（…）.dataTable。（…）.rowGrouping不是一个函数。有什么想法吗？你也添加了吗？谢谢，我还没有看到插件需要一个插件…一切正常，谢谢你的耐心！

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

var rows = document.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
var groups = [],
    item, itemName;
for (var i = 0, l = rows.length; i < l; i++) {
    item = rows[i].getElementsByTagName('td')[0];
    itemName = item.innerText.trim();
    if (groups.indexOf(itemName) !== -1) {
        addClass(rows[i], 'group-element');
    } else {
        groups.push(itemName);
        addClass(rows[i], 'group-root');
        addClass(rows[i], 'group-element');
        if (item.addEventListener) { // For all major browsers, except IE 8 and earlier
            item.addEventListener("click", toggleGroup);
        } else if (x.attachEvent) { // For IE 8 and earlier versions
            item.attachEvent("onclick", toggleGroup);
        }
    }
}

function toggleGroup(evt) {
    var tr = evt.target.parentNode,
        isVisible = !hasClass(tr, 'group-element');
    do {
        if (tr.nodeType === 1) {
            isVisible ? addClass(tr, 'group-element') : removeClass(tr, 'group-element');
        }
        tr = tr.nextSibling;
    } while (tr && !hasClass(tr, 'group-root'));
}