How to display two tr's with its id in the same row by its id

Question

I have a table with its tr tags. I want to display two tr tags side by side by its class. How can i able to do that using jquery.

<table>
   <tr class='1'>
     <td>First</td>
   </tr>
   <tr class='1'>
      <td>second</td>
   </tr>
   <tr class='2'>
       <td>third</td>
   </tr>
   <tr class='3'>
       <td>fourth</td>
   </tr>
   <tr class='3'>
       <td>fifth</td>
   </tr>  
</table>

Then in the output i want to display

 First     Second
 Third
 Fourth    Fifth

I want to set those dynamically how can i do that using jquery or javascript. I want to use the class declared for the tr tag. I know want to use <td> tag for that. Any help is appreciated

But...rows are rows. Why would you deliberately write html with rows that don't have the right format and then change it with JS? (And I guess it's obligatory for me to point out that ID should be unique.) — nnnnnn, Apr 10 '13 at 10:07
If you use class say class="one", class="two" and so on. You can use this to print the text. $('.one').each(function(){ $(this).text(); }); and so on — IndoKnight, Apr 10 '13 at 10:10
I don't knoe the class exactly it will come dynamically from the database but it will be numbers `1,2......` — Pa1, Apr 10 '13 at 10:11
Don't use a `table` if you don't want it to behave like a table, period. — moonwave99, Apr 10 '13 at 10:17

score 1 · Answer 1 · answered Apr 10 '13 at 10:29

Here's the first way that came to mind:

var $tds = $("td");      // get all the tds
[].reverse.call($tds);   // reverse the order so we can easily loop backwards

$tds.each(function() {
    var $parentRow = $(this).parent(),
        // find the first row with the same class that isn't this row
        $firstTrSameClass = $("tr").filter("." +$parentRow.attr("class"))
                                   .not($parentRow).first();
    if ($firstTrSameClass.length > 0) { // if there is such a row
        $firstTrSameClass.append(this); // move the td
        $parentRow.remove();            // delete the original row
    }   
});

Demo: http://jsfiddle.net/pgcdq/

score 0 · Answer 2 · edited May 23 '17 at 10:25

0

I can't really see a use case here but I guess the eaisiest would be to create new rows and move cells to them. You will find information on moving elements here: How to move an element into another element?

edited May 23 '17 at 10:25

Community

1
1

answered Apr 10 '13 at 10:18

Nux

9,276
5
59
72

How to display two tr's with its id in the same row by its id

2 Answers2