Javascript 在表行中展开和折叠

我有一个从服务器端生成的表，它看起来像

现在的要求是隐藏类别B的所有列，删除类别A的重复行，并以展开-折叠的方式显示类别B对应条目的条目。每个

A1 Name

列单元格将有一个展开按钮，单击该按钮时，该行B列的条目将显示在该单元格下方

我能够隐藏B类并通过

var hide_duplicate_row = function () {
            var seen = {};
            $('td:nth-child(2)').each(function () {
                var txt = $(this).text();
                if (seen[txt])
                    $(this).closest('tr').hide();
                else
                    seen[txt] = true;
            });
        };


var show_only_head = function(){
$('td:nth-child(4),th:nth-child(4)').hide();
$('td:nth-child(3),th:nth-child(3)').hide();
}

hide_duplicate_row();
show_only_head();

小提琴：

但我一直在处理展开-折叠部分，如何以这种方式填充B类别的行数据？如果您对此有任何意见，我们将不胜感激，谢谢

全表：

所需表格：

---

在td中添加一个在加载时隐藏的div，并在单击事件时显示该div

以下是此计划：

逐个浏览表中的行：

$('table tr').each(function () {

在每行上获取所需的内容：

var cell_3 = $("td:nth-child(3)", this).html(); // a3
var cell_4 = $("td:nth-child(4)", this).html(); // a4

当您仍在处理当前行时，按如下方式修改A1列：

$( "td:nth-child(1)", this ).append( '<div class="toggle">' + cell_3 + ' - ' + cell_4 + '</div>' );

$（“td:nth child（1）”，this）.append（“+cell_3+”-“+cell_4+”）；

现在，每个A1列中都应该有一个新生成的DIV。您需要在“单击”事件上分配切换功能，您应该完成。结束

您似乎正在使用jQuery进行开发，这就是为什么要向您解释这个想法，而不是提供确切的代码。：-）

编辑1：

---

这是最后的代码，根据几个具体要求：和一些格式：

使用

行span

？@Chankey您能确认您必须保留服务器生成的代码，并且只需要使用jQuery生成所需的表吗？@部长：是的，您是对的。必须保留服务器生成的代码，并且我必须只使用客户端解决方案，所以可以使用jQuery或JavaScript。谢谢，请检查。第32行有错误。请告诉我如何在

td

中选择

span

标记？好的，让我们先检查一下这个：-我修改了HTML，因为在我看来，“th”元素周围缺少了“tr”。这是正确的HTML还是我们必须使用您的（不带“th”）？哦，是的，您的是正确的。顺便说一句，我知道了如何选择那个跨度，我使用了

$（this）.find（'span'）.removeClass（className）。我将在几分钟后向您展示完整的解决方案。好的，接下来的问题：您注意到切换功能了吗：-检查示例：$（“#clickme”）。单击span选择器上的（function（））-我建议您使用：$（“.first#td span”）。单击（function（）。。。