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

​</p>

我的小提琴输入：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>

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

现在，我已经创建了一个JSFiddle来满足您的要求。该示例高度专业化，可能无法以通用方式工作。在小提琴中，我删除了rowspanandcolspan属性。当您对它们的工作感到满意时，请随意添加它们。

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>