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>

当其中一个星形图标被击中（随机数行）时，该行需要在空白行下移动。

我一直在尝试做什么...失败...在点击时获取被点击的行的行和ID，因为我需要存储被点击的内容的ID。但是使用行索引并将其移动到空白下的特定行索引，该索引将是第二个索引或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/

交换表中的特定行

1 个答案: