CODEWITHSUNDEEP
jquery
workingxx
workingxx

Reputation: 226

Swap specific rows in table

I have a basic html table with rows that look like this..

<tr id="10">
    <td>person</td>
    <td>name &nbsp <a href="#"><i class="fa fa-star swap"></i></a></td>
    <td>75</td>
    <td>100%</td>
    <td>8</td>
    <td>20</td>
    <td>6</td>
    <td>10</td>
    <td>5</td>
    <td>3/1</td>
</tr>
<tr id="20">
    <td>Bench</td>
    <td>Person Two &nbsp <a href="#"><i class="fa fa-star swap"></i></a></td>
    <td>56</td>
    <td>100%</td>
    <td>120</td>
    <td>00</td>
    <td>6</td>
    <td>8</td>
    <td>0</td>
    <td>1/4</td>
</tr>

There are more than 2 rows but there is no need to put them all. They all have a random number as a tr ID.

On the click of the star icon I need to get that row in the table and switch it with second row under the thead. I need it to be the second row because the first row always has to be blank.

So in short I have

<thead></thead>
<tbody>
    <tr>BLANK ROW</tr>
    <tr id=RANDOM NUMBER>
        <td></td>
    </tr>
    <tr id=RANDOM NUMBER>
        <td></td>
    </tr>
    <tr id=RANDOM NUMBER>
        <td></td>
    </tr>
</body>

When one of the star icons are hit(random number row) that row needs to be moved under the blank row.

What I have been trying to do...unsuccessfully.. is on the click get the row and id of what was clicked because I need to store the id of what was clicked. But use the row index and move it to the specific row index under the blank which would be the second index or 1(if it starts at 0)

$(document).ready(function() {
  $(".starter").click(function(){

  });
});

Upvotes: 0

Views: 1109

Answers (1)

sinisake
sinisake

Reputation: 11328

$('.swap').click(function() {

   id=$(this).closest('tr').attr('id'); //get id
  $(this).closest('tr').insertBefore( $('table tr').eq(1) ); //place before first row, under blank row

});

Demo: http://jsfiddle.net/0qf8fsyw/1/

Upvotes: 1

Related Questions