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 を追加し、2 行目の開始前に閉じたいと思います。行ごとにこのプロセスを繰り返し (タグを開き、次の行の前に閉じます)、最後の行では単純に閉じます。

したがって、私が望む出力は次のとおりです。

<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 に答える