包含多行的 HTML 表格

Question

我想展开一列并在其中显示一组行。

我想要达到的目标:

到目前为止我取得了什么成就

我的代码:

<table style="background-color:lightgreen"  border="1">
 <tr >
     <td>Id</td>
     <td>Name</td>
     <td>Col1</td>
     <td>Col2</td>
     <td>Group Related Column (value for each expanded cell)</td>
     <td>Col4</td>
 </tr>
 <tr >
     <td  rowspan="5" >#1</td> 
     <td  rowspan="5">AFSBEESS1</td>
     <td rowspan="5">
         <tr><td>[-] Group Name</td></tr>
         <tr><td>#1 in Group</td></tr>
         <tr><td>#2 in Group</td></tr>
         <tr><td>#3 in Group</td></tr>
     </td>
    <td rowspan="5">
         <tr><td>[-] Group Name</td></tr>
         <tr><td>#1 in Group</td></tr>
         <tr><td>#2 in Group</td></tr>
         <tr><td>#3 in Group</td></tr>
     </td>

     <td>x</td>
     <td>x</td>
 </tr>

我的 fiddle 输入:http://jsfiddle.net/yDUZg/78/

执行相同操作的最佳表格格式是什么？

是否有一些插件可以达到轻松对列进行分组的相同效果？

或者更好的解决问题的方法？

在 ASP.NET 中做，但由于这是基本的事情，我将其标记为 HTML

Answer 1

你看过类似的东西吗 - http://www.jankoatwarpspeed.com/post/2009/07/20/Expand-table-rows-with-jQuery-jExpand-plugin.aspx ？

此插件允许您根据需要折叠/展开表格行。

上面的 html 是错误的，因为您将 tr 嵌套在 td 元素中。当您将 rowspan="x" 添加到列时，您应该在接下来的 x 行中省略它。例如，

<table>
<tr>
   <td rowspan="2">Funky</td>
   <td>Joy</td>
</tr>
<tr>
   <td>Fun</td>
</tr>
</table>

您对 rowspan 的概念感到困惑 - http://www.htmlcodetutorial.com/tables/index_famsupp_30.html

现在，我创建了一个 JSFiddle那就是你所要求的。该示例是高度特化的，可能无法以通用方式工作。在 fiddle 中，我删除了 rowspan 和 colspan 属性。当您对他们的工作感到满意时，请随意添加他们。