jQuery add div around table tr items which have specific attribute

I have a table with tr s where few of them have attribute active and few of them have attribute inactive. I am trying to group them. How can I add a div wrapper around tr s with inactive attribute items.

Current Code:

    <div class="alertsList">
        <table width="100%">
            <tbody>
                <tr>
                    <th></th>
                    <th>Id</th>
                    <th>From</th>
                    <th>Action</th>
                    <th>State</th>
                    <th>time</th>
                    <tr class="alertRow" state="Active">
                        <td></td>
                        <td>1025973</td>
                        <td>SYSTEM</td>
                        <td>false</td>
                        <td class="Active">Active</td>
                        <td>2014-09-23T00:59:26.92</td>
                    </tr>
                    <tr class="alertRow" state="Active">
                        <td></td>
                        <td>1025974</td>
                        <td>SYSTEM</td>
                        <td>false</td>
                        <td class="Active">Active</td>
                        <td>2014-09-23T00:59:26.92</td>
                    </tr>
                    <tr class="alertRow" state="InActive">
                        <td></td>
                        <td>1025974</td>
                        <td>SYSTEM</td>
                        <td>false</td>
                        <td class="InActive">InActive</td>
                        <td>2014-09-23T00:59:26.92</td>
                    </tr>
                    <tr class="alertRow" state="InActive">
                        <td></td>
                        <td>1025974</td>
                        <td>SYSTEM</td>
                        <td>false</td>
                        <td class="InActive">InActive</td>
                        <td>2014-09-23T00:59:26.92</td>
                    </tr>
                    <tr class="alertRow" state="Active">
                        <td></td>
                        <td>1025974</td>
                        <td>SYSTEM</td>
                        <td>false</td>
                        <td class="Active">Active</td>
                        <td>2014-09-23T00:59:26.92</td>
                    </tr>
            </tbody>
        </table>
    </div>

Required: I am trying to achieve the below

<div class="alertsList">
    <table width="100%">
        <tbody>
            <tr>
                <th></th>
                <th>Id</th>
                <th>From</th>
                <th>Action</th>
                <th>State</th>
                <th>time</th>
          <tr class="alertRow" state="Active">
                    <td></td>
                    <td>1025974</td>
                    <td>SYSTEM</td>
                    <td>false</td>
                    <td class="Active">Active</td>
                    <td>2014-09-23T00:59:26.92</td>
                </tr>      
          <tr class="alertRow" state="Active">
                    <td></td>
                    <td>1025973</td>
                    <td>SYSTEM</td>
                    <td>false</td>
                    <td class="Active">Active</td>
                    <td>2014-09-23T00:59:26.92</td>
                </tr>
                <tr class="alertRow" state="Active">
                    <td></td>
                    <td>1025974</td>
                    <td>SYSTEM</td>
                    <td>false</td>
                    <td class="Active">Active</td>
                    <td>2014-09-23T00:59:26.92</td>
                </tr>

**<div class="inAct">**
                <tr class="alertRow" state="InActive">
                    <td></td>
                    <td>1025974</td>
                    <td>SYSTEM</td>
                    <td>false</td>
                    <td class="InActive">InActive</td>
                    <td>2014-09-23T00:59:26.92</td>
                </tr>
                <tr class="alertRow" state="InActive">
                    <td></td>
                    <td>1025974</td>
                    <td>SYSTEM</td>
                    <td>false</td>
                    <td class="InActive">InActive</td>
                    <td>2014-09-23T00:59:26.92</td>
                </tr>
      **</div>**
        </tbody>
    </table>
</div>

Solution

Because the only valid parent elements of a <tr> element are <table>, <tbody>, <thead> and <tfoot> (not <div>), and the only valid child elements of those elements are <tr> elements (again not a <div>), I'd suggest not using a <div> (clearly).

That said, a <table> can contain multiple <tbody> elements, so I'd suggest using one of those instead:

// get the <tr> elements with the class of 'alertRow' and
// the 'state' equal to 'InActive':
$('tr.alertRow[state="InActive"]')
// wrap all those elements (together) in one <tbody>
// element, created here:
.wrapAll('<tbody class="InAct"></tbody>')
// wrapAll() returns the wrapped elements, we want the
// created-element, so we use parent():
.parent()
// we append that parent (along with its contained descendants)
// to the existing table:
.appendTo('div.alertsList table');

$('tr.alertRow[state="InActive"]')
  .wrapAll('<tbody class="InAct"></tbody>')
  .parent()
  .appendTo('div.alertsList table');

.InAct tr {
  color: #f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="alertsList">
  <table width="100%">
    <tbody>
      <tr>
        <th></th>
        <th>Id</th>
        <th>From</th>
        <th>Action</th>
        <th>State</th>
        <th>time</th>
      </tr>
      <tr class="alertRow" state="Active">
        <td></td>
        <td>1025973</td>
        <td>SYSTEM</td>
        <td>false</td>
        <td class="Active">Active</td>
        <td>2014-09-23T00:59:26.92</td>
      </tr>
      <tr class="alertRow" state="Active">
        <td></td>
        <td>1025974</td>
        <td>SYSTEM</td>
        <td>false</td>
        <td class="Active">Active</td>
        <td>2014-09-23T00:59:26.92</td>
      </tr>
      <tr class="alertRow" state="InActive">
        <td></td>
        <td>1025974</td>
        <td>SYSTEM</td>
        <td>false</td>
        <td class="InActive">InActive</td>
        <td>2014-09-23T00:59:26.92</td>
      </tr>
      <tr class="alertRow" state="InActive">
        <td></td>
        <td>1025974</td>
        <td>SYSTEM</td>
        <td>false</td>
        <td class="InActive">InActive</td>
        <td>2014-09-23T00:59:26.92</td>
      </tr>
      <tr class="alertRow" state="Active">
        <td></td>
        <td>1025974</td>
        <td>SYSTEM</td>
        <td>false</td>
        <td class="Active">Active</td>
        <td>2014-09-23T00:59:26.92</td>
      </tr>
    </tbody>
  </table>
</div>

Note that, while custom elements work, they are not valid (outside of HTML5), and in HTML5 they are data- prefixed, to give the (valid) custom attribute of data-state:

<div class="alertsList">
  <table width="100%">
    <tbody>
      <tr>
        <th></th>
        <th>Id</th>
        <th>From</th>
        <th>Action</th>
        <th>State</th>
        <th>time</th>
      </tr>
      <tr class="alertRow" data-state="Active">
        <td></td>
        <td>1025974</td>
        <td>SYSTEM</td>
        <td>false</td>
        <td class="Active">Active</td>
        <td>2014-09-23T00:59:26.92</td>
      </tr>
      <tr class="alertRow" data-state="InActive">
        <td></td>
        <td>1025974</td>
        <td>SYSTEM</td>
        <td>false</td>
        <td class="InActive">InActive</td>
        <td>2014-09-23T00:59:26.92</td>
      </tr>
      <!-- and so forth... -->
  </table>
</div>

With that amendment made, the above jQuery still pretty much works as-is, albeit the attribute-selector has to be modified to match the new custom attribute, giving:

$('tr.alertRow[data-state="InActive"]')
.wrapAll('<tbody class="InAct"></tbody>')
.parent()
.appendTo('div.alertsList table');

$('tr.alertRow[data-state="InActive"]')
  .wrapAll('<tbody class="InAct"></tbody>')
  .parent()
  .appendTo('div.alertsList table');

.InAct tr {
  color: #f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="alertsList">
  <table width="100%">
    <tbody>
      <tr>
        <th></th>
        <th>Id</th>
        <th>From</th>
        <th>Action</th>
        <th>State</th>
        <th>time</th>
      </tr>
      <tr class="alertRow" data-state="Active">
        <td></td>
        <td>1025973</td>
        <td>SYSTEM</td>
        <td>false</td>
        <td class="Active">Active</td>
        <td>2014-09-23T00:59:26.92</td>
      </tr>
      <tr class="alertRow" data-state="Active">
        <td></td>
        <td>1025974</td>
        <td>SYSTEM</td>
        <td>false</td>
        <td class="Active">Active</td>
        <td>2014-09-23T00:59:26.92</td>
      </tr>
      <tr class="alertRow" data-state="InActive">
        <td></td>
        <td>1025974</td>
        <td>SYSTEM</td>
        <td>false</td>
        <td class="InActive">InActive</td>
        <td>2014-09-23T00:59:26.92</td>
      </tr>
      <tr class="alertRow" data-state="InActive">
        <td></td>
        <td>1025974</td>
        <td>SYSTEM</td>
        <td>false</td>
        <td class="InActive">InActive</td>
        <td>2014-09-23T00:59:26.92</td>
      </tr>
      <tr class="alertRow" data-state="Active">
        <td></td>
        <td>1025974</td>
        <td>SYSTEM</td>
        <td>false</td>
        <td class="Active">Active</td>
        <td>2014-09-23T00:59:26.92</td>
      </tr>
    </tbody>
  </table>
</div>

References: