Group Rows in a variable

Question

I have our client data in following format :

<table id="t01">
  <tr>
    <th>HEAD 1</th>
    <th>HEAD 2</th>     
    <th>HEAD 3</th>
  </tr>
  <tr id="Grp1">
    <td>Grp1 data</td>
    <td>Grp1 data</td>      
    <td>Grp1 data</td>
  </tr>
  <tr>
    <td>Grp1 data</td>
    <td>Grp1 data</td>      
    <td>Grp1 data</td>
  </tr>
  <tr>
    <td>Grp1 data</td>
    <td>Grp1 data</td>      
    <td>Grp1 data</td>
  </tr>
  <tr id="Grp2">
    <td>Grp2 data</td>
    <td>Grp2 data</td>      
    <td>Grp2 data</td>
  </tr>
  <tr>
    <td>Grp2 data</td>
    <td>Grp2 data</td>      
    <td>Grp2 data</td>
  </tr>
  <tr>
    <td>Grp2 data</td>
    <td>Grp2 data</td>      
    <td>Grp2 data</td>
  </tr>
<tr id="Grp3">
    <td>Grp3 data</td>
    <td>Grp3 data</td>      
    <td>Grp3 data</td>
  </tr>
  <tr>
    <td>Grp3 data</td>
    <td>Grp3 data</td>      
    <td>Grp3 data</td>
  </tr>
  <tr>
    <td>Grp3 data</td>
    <td>Grp3 data</td>      
    <td>Grp3 data</td>
  </tr>...
</table>

And have to move the rows up and down depends upon some condition. Here is my js code:

if(val == valX){
 $("#Grp2").after($("#Grp1"))// This will hold only one tr.
 // move all Grp1 data rows and set after Grp2 data
}
if(val == valy){

 // move all Grp2 data rows on the top of all the rows
}

if(val == valz){
 // move all Grp3 data rows on the top of all the rows
}...

Since my question is:

How can I move all three rows at a time up or down OR
How can I get group of 3 rows in a variable like combined = $("#Grp1") + $("#Grp1").next() + $("#Grp1").next();

Note- As the Html structure is also used for some other purposes. Since I can not change any structure in the HTML

You could use `` to group the rows and then apply your logic. — Re Captcha, Dec 29 '14 at 11:27
@Barmar, I agree with you. It's a kind of a hack, that's why I put it as a comment. — Re Captcha, Dec 29 '14 at 11:29
@ReCaptcha that will only work if the rows are adjacent to each other. — Barmar, Dec 29 '14 at 11:29
Moving rows up or down made me look into sorting, so I hope you find this link useful: http://stackoverflow.com/questions/22906760/jquery-sort-table-data — jyrkim, Dec 29 '14 at 11:47

Barmar · Accepted Answer · 2014-12-29T12:55:05.763

6

You can use .add to add elements to a jQuery collection:

var combined = $("#Grp1").add($("#Grp1").nextUntil("#Grp2"));

An equivalent way is with .addBack:

var combined = $("#Grp1").nextUntil("#Grp2").addBack();

edited Dec 29 '14 at 12:55

answered Dec 29 '14 at 11:33

Barmar

741,623
53
500
612

@Barmar- Many Thanks for your efforts. Worked like a charm!! :) – trex Dec 29 '14 at 11:56
Why not using `addBack`? – Ram Dec 29 '14 at 12:37
@Vohuman I'm not sure what the effective difference is between them. – Barmar Dec 29 '14 at 12:46
1

You are right. There is no fundamental difference. As you have used `nextUntil` I think `addBack` is just more readable. – Ram Dec 29 '14 at 12:52

Group Rows in a variable

1 Answers1

Linked