4

我有一些格式极差的 HTML 代码，其中表中的每个元素都是一行。我想通过向页面添加一些 HTML 来更轻松地对子元素进行分组。这是 HTML 的一个小例子：

<html>
  <head>
    <title>Test</title>
  </head>
  <body>
    <table width="100%">
      <tr class="heading">
        <td>value 1</td>
      </tr>
      <tr>
        <td>sub 1</td>
      </tr>
      <tr>
        <td>sub 1</td>
      </tr>
      <tr class="heading">
        <td>value 2</td>
      </tr>
      <tr>
        <td>sub 2</td>
      </tr>
      <tr class="heading">
        <td>value 3</td>
      </tr>
      <tr>
        <td>sub 3</td>
      </tr>
    </table>
  </body>
</html>​

我想用一个标题类、另一个 tr 或 div 或任何东西来包装每一行，以便我更容易地抓住子元素。我已经尝试过之前、html 等的各种组合。但我似乎无法让它工作。

这是我放在一起的一个jsfiddle 。有什么方法可以用一类标题包装 tr 值？例如，我想在示例 HTML 中获取带有类标题的 3 行。我想在第一行前面加上一些 HTML，然后在第二行开始之前关闭它。我会为每一行重复这个过程（打开一个标签并在下一行之前关闭它），在最后一行我会简单地关闭它。

所以我想要的输出是：

<html>
  <head>
    <title>Test</title>
  </head>
  <body>
    <table width="100%">
      <SOME_TAG>
        <tr class="heading">
          <td>value 1</td>
        </tr>
        <tr>
          <td>sub 1</td>
        </tr>
        <tr>
          <td>sub 1</td>
        </tr>
      </SOME_TAG>
      <SOME_TAG>
        <tr class="heading">
          <td>value 2</td>
        </tr>
        <tr>
          <td>sub 2</td>
        </tr>
      </SOME_TAG>
      <SOME_TAG>
        <tr class="heading">
          <td>value 3</td>
        </tr>
        <tr>
          <td>sub 3</td>
        </tr>
      </SOME_TAG>
    </table>
  </body>
</html>​
4

1 回答 1

4

根据 kssr 的建议 — 使用 nextUntil 和 wrapAll 将它们包装在子表中

$(document).ready(function()
    {
        wrapTR(0);
    });

    function wrapTR(index)
    {
        $('tr.heading:eq('+index+')').nextUntil('.heading').andSelf().wrapAll('<table class="useful-grouping" id="table-'+index+'"/>');
        if($('tr.heading:eq('+index+')').next('.heading'))
        {
            wrapTR(index+1)
        }
    }
于 2012-10-31T16:27:01.910 回答