свопа конкретные строки в таблице

Question

У меня есть основной HTML таблица со строками, которые выглядят, как это ..

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

Есть более 2-х строк, но нет никакой необходимости, чтобы поместить их всех. Все они имеют случайное число как tr ID.

При щелчке значка звезды мне нужно получить эту строку в таблице и переключить ее со второй строкой под thead. Мне нужно, чтобы это была вторая строка, потому что первая строка всегда должна быть пустой.

Так короче у меня есть

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

Когда одна из звезд иконки хита (случайное число строк), что строка должна быть перемещена под пустой строкой.

То, что я пытаюсь сделать ... безуспешно .. на клике получить строку и идентификатор того, что было нажато, потому что мне нужно сохранить идентификатор того, что было нажато. Но использовать индекс строки и переместить его к определенному индексу строки по заготовке, который был бы вторым индексом или 1 (если она начинается с 0)

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

    }); 
}); 

Answer 1

$('.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 

}); 

Демо: http://jsfiddle.net/0qf8fsyw/1/