jQuery操作表格Table行上下(xià)移動

jQuery操作表格Table行上下(xià)移動，具體(tǐ)代碼如下(xià)：
每行的代碼我(wǒ)(wǒ)是用PHP循環輸出的，如果不懂php的，直接去(qù)掉相關PHP代碼，複制裏面的TR進行弄幾行，注意相關ID裏面的<?=$i?>是随着循環變化的，即1、2、3...自行進行修改

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery1_13.min.js"></script>
<table border="0" align="center" cellpadding="4" cellspacing="1" bgcolor="#cccccc">
      <thead>
      <tr>
            <td width="50" bgcolor="#F0F0F0"><div align="center">行号</div></td>
            <td width="150" bgcolor="#F0F0F0"><div align="center">标題</div></td>
            <td width="100" bgcolor="#F0F0F0"><div align="center">排序值</div></td>
            <td width="150" bgcolor="#F0F0F0"><div align="center">操作</div></td>
      </tr>
      </thead>
      <tbody id="tbl">
      <? for ( $i=1; $i<=5; $i++ ){ ?>
      <tr id="id_<?=$i?>">
            <td align="center" bgcolor="#FFFFFF" id="hh_id_<?=$i?>"><?=$i?></td>
            <td align="center" bgcolor="#FFFFFF">标題 <?=$i?></td>
            <td align="center" bgcolor="#FFFFFF"><input id="px_id_<?=$i?>" name="px" type="text" size="4" maxlength="4" value="<?=5-$i?>" readonly style=" text-align:center;" /></td>
            <td align="center" bgcolor="#FFFFFF">
                  <input id="btn_s_id_<?=$i?>" type="button" onclick="move(<?=$i?>, 1);" value="上移↑" <? if ( $i == 1 ) echo "disabled"; ?> />
                  <input id="btn_x_id_<?=$i?>" type="button" onclick="move(<?=$i?>, 0);" value="下(xià)移↓" <? if ( $i == 5 ) echo "disabled"; ?> />
            </td>
      </tr>
      <? } ?>
      </tbody>
</table>
<script type="text/javascript">
      var tb = document.getElementById("tbl"); //獲取表格對象
      var rows = tb.rows.length; //獲取當前表格的行數
      var colums = tb.rows[1].cells.length; //獲取當前表格的列數

      function move(id, s) {
            var this_tr = document.getElementById("id_"+id); //獲取當前行的對象
            
            if ( s ){
                  if ( this_tr.rowIndex > 1 ){
                        $("#tbl tr:nth-child(" + this_tr.rowIndex + ")").insertBefore($("#tbl tr:nth-child(" + (this_tr.rowIndex - 1) + ")")); //上移
                  }
            }else{
                  if ( this_tr.rowIndex < rows ){
                        $("#tbl tr:nth-child(" + this_tr.rowIndex + ")").insertAfter($("#tbl tr:nth-child(" + (this_tr.rowIndex + 1) + ")")); //下(xià)移
                  }
            }
            for( var r=0; r<rows; r++ ){
                  document.getElementById("hh_"+tb.rows[r].id).innerHTML = tb.rows[r].rowIndex; //重新更新行号
                  document.getElementById("px_"+tb.rows[r].id).value = rows - r; //重新更新排序值
                  
                  if ( r < 1 ){
                        document.getElementById("btn_s_"+tb.rows[r].id).disabled = true; //如果是第一(yī)行，則禁止上移
                  }else{
                        document.getElementById("btn_s_"+tb.rows[r].id).disabled = false;
                  }
                  if ( r >= rows-1 ){
                        document.getElementById("btn_x_"+tb.rows[r].id).disabled = true; //如果是最後一(yī)行，則禁止下(xià)移
                  }else{
                        document.getElementById("btn_x_"+tb.rows[r].id).disabled = false;
                  }
                  
                  //設置行背景色，如果該行等于當前操作行，則，将當前行的背景色設置爲 #CEDEF2
                  if ( tb.rows[r].id == this_tr.id ){
                        for( var c=0; c<colums; c++ ){
                              this_tr.cells[c].style.backgroundColor = "#CEDEF2";
                        }
                  }else{ //否則，默認背景色爲#FFFFFF
                        for( var c=0; c<colums; c++ ){
                              tb.rows[r].cells[c].style.backgroundColor = "#FFFFFF";
                        }
                  }
            }
      }
</script>