在表格行中展开和折叠

问题描述：

我有一张从服务器端生成的表格，它看起来像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类的行数据以这种方式？任何意见，将不胜感激，谢谢。

全表：

enter image description here

所需的表：

enter image description here

如何使用'rowspan'？ – Ranveer

@Chankey您能否确认您必须保留服务器生成的代码，并且只需要使用jQuery生成所需的表格？ – Minister

@Minister：是的，你是对的。服务器生成的代码必须保留，我只能使用客户端解决方案，所以是的，无论是jQuery或JavaScript。 –

答

这里这个计划：

经过表行逐一：

$('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/

谢谢，请查看[我的逻辑尝试]（http://jsfiddle.net/ME3kG/8/）。我在第32行出现错误。请让我知道如何选择'td'内的'span'标签？ –

好吧，我们先来看看这个：http://jsfiddle.net/ME3kG/9/ - 我修改了HTML，因为在我看来，'th'元素周围缺少'tr'。这是正确的HTML还是我们必须使用你的（没有'th'）？ – Minister

哦，你的是对的。顺便说一句，我得到如何选择跨度，我用'$（this）.find（'span'）.removeClass（className）;'。我会在几分钟内向你展示完整的解决方案。 –

答

添加在您的TD一个div它的onload隐藏和click事件显示它

在表格行中展开和折叠

相关推荐