jquery - 如何制作一个包含这样分组行的表格？

Question

我想制作一个包含与此类似的行组的表格

但是我不太明白。我尝试过使用多个 <tbody>元素，调整colspan在我的<td>上元素，但这些都不适合我。如果它使任务更容易，我正在使用 jQuery DataTables。

编辑:这就是我所拥有的

<table id="groupedTable">
        <thead>
            <tr>
                <th>Group</th>                                
                <th>Name</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Group1</td>
                <td>test</td>
            </tr>
            <tr>
                <td>Group1</td>
                <td>test</td>
            </tr>
            <tr>
                <td>Group1</td>
                <td>test</td>
            </tr>
            <tr>
                <td>Group1</td>
                <td>test</td>
            </tr>
            <tr>
                <td>Group1</td>
                <td>test</td>
            </tr>
            <tr>
                <td>Group1</td>
                <td>test</td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td>Group2</td>
                <td>test</td>
            </tr>
            <tr>
                <td>Group2</td>
                <td>test</td>
            </tr>
            <tr>
                <td>Group2</td>
                <td>test</td>
            </tr>
            <tr>
                <td>Group2</td>
                <td>test</td>
            </tr>
            <tr>
                <td>Group2</td>
                <td>test</td>
            </tr>
            <tr>
                <td>Group2</td>
                <td>test</td>
            </tr>
        </tbody>

    </table>

是的，我知道缩进很奇怪，这里的编辑讨厌我

Answer 1

我相信您正在寻找rowspan。这个 fiddle 对你有什么作用？

jsFiddle

<table>
  <tr>
    <th>Group</th>
    <th>Name</th>
  </tr>
  <tr>
    <td rowspan="4">Group 1</td>
  </tr>
  <tr>
    <td>Test</td>
  </tr>
  <tr>
    <td>Test</td>
  </tr>
  <tr>
    <td>Test</td>
  </tr>
  <tr>
    <td rowspan="4">Group 2</td>
  </tr>
  <tr>
    <td>Test</td>
  </tr>
  <tr>
    <td>Test</td>
  </tr>
  <tr>
    <td>Test</td>
  </tr>
</table>