Home/ Questions/Q 8764821
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T16:07:35+00:00

I have some extremely poorly formatted HTML code, where each element in a table

  • 0

I have some extremely poorly formatted HTML code, where each element in a table is a row. I want to group the sub-elements a little easier, by adding some HTML to the page. Here is a small example of the 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>​

I’d like to wrap each of the rows with a class of heading, with another tr or div or really anything to allow me to grab the sub-elements a bit easier. I’ve tried various combinations of before, html, etc.. yet I can’t seem to get this to work.

Here is a jsfiddle that I’ve put together. Any way to wrap the the tr values with a class of heading? For example, I’d like to grab the 3 rows with class heading in the sample HTML. I’d like to prepend that first row with some HTML, and close it before the start of the second row. I would repeat that process for each row (open a tag and close it before the next row), on the final row I would simply close it.

So the output I would like is:

<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>​
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Based on kssr’s suggestion — wrap them in subtables using nextUntil and 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)
        }
    }
    • 0