具有多行的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>

我的小提琴输入：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来完成你所要求的工作。该示例是高度专业化的，可能无法以通用方式工作。在小提琴中，我删除了rowspan和colspan属性。当您对自己的工作感到满意时，请随意添加它们。

Answer 2

如果您已开始使用表格，那么为什么不将它们嵌套呢？如果希望行显示在单元格中，只需添加另一个表。

Answer 3

你可以用JavaScript做到这一点。我认为它看起来像这样：

<script type="text/javascript">
...
// You could use these in an event (inside some callback function)

$('tr.expand').style.visibility = 'hidden'
$('tr.expand').style.visibility = 'visible'

// OR you could use these...

$('tr.expand').show();
$('tr.expand').hide();
...
</script>

<!-- And then of course the group of <tr>'s you want to expand 
     on an event would all have the same class -->

<table>
...
<tr class="expand">
    <td>...</td>
</tr>
<tr class="expand">
    <td>...</td>
</tr>
...
</table>