如何在JQuery / HTML中执行多层嵌套表

Question

我正在尝试创建具有可扩展/折叠的多层嵌套的表。 因此，主表具有可扩展的行，以显示表中间的子行，这些子行本身也可以扩展。

每个表都需要有自己的标题，最好各列都排成一行，但子表的开头应稍稍缩进，如下所示。

例如：

ColHeader1              ColHeader2   // main table headers only shown at the top
record1                 ...
  ChildHeader1          ChildHeader2 // child headers shown for each table
  childrec1             ...
     SubChildHeader1    SubChildHeader2 // child headers shown for each table
     subchildrec1       ...
  childrec2             ...
record2                 ...
  ChildHeader1          ChildHeader2 // child headers shown for each table
  childrec5             ...
record3                 ...

我试图通过扩展找到的示例来创建代码，但不适用于扩展最里面的表。 可以在这里找到代码： http : //jsfiddle.net/afsz5brg/

最终产品将在ASP.Net MVC应用程序中，但是现在，我只是试图使其在javascript / JQuery中运行，以便希望我可以更改发送给它的数据。 我很高兴考虑执行此操作的替代方法，或者会被告知是否有任何代码做得不好/不推荐使用。

Answer 1

我在您的代码中发现了几个错误。 我会一一列出。

1）您假设在$('#detailsTable tbody td').on('click', ...);上注册回调 并且在创建的该表的每个新实例上调用该方法是错误的。

如果jQuery数据表在内部克隆#detailsTable元素，则您的代码将起作用。 但是情况并非如此，因为您正在检索#detailsTable的HTML标记并将其返回给fnOpen，如下所示： oTable.fnOpen(nTr, fnFormatDetails(iTableCounter, detailsTableHtml), 'details'); 因此回调永远不会被调用。

您需要向新创建的详细信息表注册回调。 查看此JsFiddle以了解操作方法。

2）我想我在阅读您的代码时也发现了另一个错误。 我还没有解决问题，因为我不确定自己是否正确。 在#detailsTable的回调中，您调用fnFormatDetails（）而不是fnFormatSubDetails（），如oInnerTable.fnOpen(nTr, fnFormatDetails(iSubTableCounter, subDetailsTableHtml), 'subdetails'); 目前没有人在调用fnFormatSubDetails（）。 请检查这是否是错误。