在表格行中展开和折叠答案

【问题标题】：Expand and collapse in table row在表格行中展开和折叠
【发布时间】：2014-01-20 06:48:05
【问题描述】：

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

现在的要求是隐藏B类的所有列，删除A类的重复行，并以展开-折叠的方式显示B类对应条目的条目。每个A1 Name Column 单元格都会有一个展开按钮，当点击它时，该行的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 类别的行数据？对此的任何意见将不胜感激，谢谢。

全表：

想要的表：

【问题讨论】：

用rowspan怎么样？
@Chankey 您能否确认您必须保留服务器生成的代码，并且您需要仅使用 jQuery 生成所需的表？
@Minister：是的，你是对的。必须保留服务器生成的代码，我只能使用客户端解决方案，所以可以使用 jQuery 或 JavaScript。

标签： javascript jquery css

【解决方案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。您需要在“点击”事件上分配一个切换功能，您应该已经完成了。 END。

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

编辑 1：

这是最终代码，根据几个具体要求：http://jsfiddle.net/ME3kG/26/ 和一些格式：http://jsfiddle.net/ME3kG/30/

【讨论】：

谢谢，检查what I tried by your logic。我在第 32 行遇到错误。请告诉我如何在 td 中选择 span 标记？
好的，让我们首先检查一下：jsfiddle.net/ME3kG/9 - 我已经修改了 HTML，因为在我看来，“th”元素周围缺少“tr”。这是正确的 HTML 还是我们必须使用您的（不带“th”）？
哦，是的，你的说法是正确的。顺便说一句，我知道如何选择该跨度，我使用了$( this ).find( 'span' ).removeClass(className);。我会在几分钟内向您展示完整的解决方案。
好的，那么下一个问题：您注意到切换功能了吗：api.jquery.com/toggle - 检查示例：$( "#clickme" ).click(function()
在跨度选择器上 - 我建议您使用：$(".first_td span").click(function() ...

【解决方案2】：

在您的 td 中添加一个隐藏 onload 的 div 并在点击事件时显示它

【讨论】：