HTML - 是否有正确的容器元素可以放置在表格行周围？

发布于 2024-12-09 07:24:07 字数 751 浏览 0 评论 0原文

我有一个 HTML 表，我想使用带有一些基本 JavaScript 的选择框动态添加或删除行。

我不是添加单行，而是同时添加一组相似的行。例如，如果我已经有一组，然后添加了另一组，结果将如下所示：

<tr>
<th colspan="2">Item 1</th>
</tr>
<tr>
  <th>Title</th>
  <td>X</td>
</tr>
<tr>
  <th>Description</th>
  <td>Y</td>
</tr>
<tr>
<th colspan="2">Item 2</th>
</tr>
<tr>
  <th>Title</th>
  <td>A</td>
</tr>
<tr>
  <th>Description</th>
  <td>B</td>
</tr>

为了添加行，我使用 jQuery 的克隆方法，因此我需要某种容器元素来围绕行组，但是，我尝试过的所有内容（span、div 等）都导致 HTML 无效且无法正常运行。

我设法让它工作的唯一方法是将每个集合作为一个单独的表，但这并不是我真正想要的效果。

我能做些什么来解决这个问题吗？

原文

I have an HTML table, to which I would like to add or remove rows dynamically, using a select box with some basic javascript.

I am not adding single rows, but a group of similar rows at the same time. For example, if I already had one set, then added another, the result would like like this:

<tr>
<th colspan="2">Item 1</th>
</tr>
<tr>
  <th>Title</th>
  <td>X</td>
</tr>
<tr>
  <th>Description</th>
  <td>Y</td>
</tr>
<tr>
<th colspan="2">Item 2</th>
</tr>
<tr>
  <th>Title</th>
  <td>A</td>
</tr>
<tr>
  <th>Description</th>
  <td>B</td>
</tr>

To add the rows, I am using jQuery's clone method, so I need some sort of container element to go around the group of rows, however, everything I have tried (span, div, etc) has led to invalid HTML and not functioned correctly.

The only way I have managed to get it working is to have each set as a separate table, but this isn't really the effect I want.

Is there anything I can do to get around this?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

江湖彼岸 2024-12-16 07:24:07

; 是您要查找的标签。

（如果您的是其表格行组的标题，您还可以使用 scope 属性来指示这一点：

<tbody>
    <tr>
    <th scope="rowgroup" colspan="2">Item 1</th>
    </tr>
    <tr>
      <th scope="row">Title</th>
      <td>X</td>
    </tr>
    <tr>
      <th scope="row">Description</th>
      <td>Y</td>
    </tr>
</tbody>
<tbody>
    <tr>
    <th scope="rowgroup" colspan="2">Item 2</th>
    </tr>
    <tr>
      <th scope="row">Title</th>
      <td>A</td>
    </tr>
    <tr>
      <th scope="row">Description</th>
      <td>B</td>
    </tr>
</tbody>

请注意，在表中，您必须将所有放入 中。（或或 ) 元素，或者都没有。

即这是有效的：

<table>
    <!-- All <tr>s are inside <tbody>s -->
    <tbody>
        <tr>
            <td></td>
        </tr>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td></td>
        </tr>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

但这不是：

<table>
    <!-- <tr>s and <tbody>s can’t be siblings. -->
    <tr>
        <td></td>
    </tr>
    <tbody>
        <tr>
            <td></td>
        </tr>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

<tbody> is the tag you’re looking for.

(And if your <th>s are headings for their group of table rows, you can also use the scope attribute to indicate this: <th colspan="2" scope="rowgroup">.)

<tbody>
    <tr>
    <th scope="rowgroup" colspan="2">Item 1</th>
    </tr>
    <tr>
      <th scope="row">Title</th>
      <td>X</td>
    </tr>
    <tr>
      <th scope="row">Description</th>
      <td>Y</td>
    </tr>
</tbody>
<tbody>
    <tr>
    <th scope="rowgroup" colspan="2">Item 2</th>
    </tr>
    <tr>
      <th scope="row">Title</th>
      <td>A</td>
    </tr>
    <tr>
      <th scope="row">Description</th>
      <td>B</td>
    </tr>
</tbody>

Note however that within the table, you must either put all <tr>s in a <tbody> (or <thead> or <tfoot>) element, or none of them.

I.e. this is valid:

<table>
    <!-- All <tr>s are inside <tbody>s -->
    <tbody>
        <tr>
            <td></td>
        </tr>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td></td>
        </tr>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

But this isn’t:

<table>
    <!-- <tr>s and <tbody>s can’t be siblings. -->
    <tr>
        <td></td>
    </tr>
    <tbody>
        <tr>
            <td></td>
        </tr>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

回复收藏 0 原文