在表格行中展开和折叠

Question

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

现在要求隐藏类别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();

小提琴：http://jsfiddle.net/ME3kG/3/

但我坚持使用展开折叠部分，如何以这种方式填充B类别的行数据？对此的任何意见都将不胜感激，谢谢。

全桌：

所需的表格：

Answer 1

以下是此计划：

逐个遍历表格行：

$('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>' );

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

您似乎正在使用jQuery进行开发，这是向您解释这个想法的原因，而不是给您确切的代码。 ： - ）

编辑1 ：

以下是最终代码，根据少数具体要求：http://jsfiddle.net/ME3kG/26/和一些格式：http://jsfiddle.net/ME3kG/30/

Answer 2

在你的td中添加一个隐藏onload的div并在click事件

上显示它