jQuery操作表格Table行上下移动

jQuery操作表格Table行上下移动，具体代码如下：
每行的代码我是用PHP循环输出的，如果不懂php的，直接去掉相关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="下移↓" <? 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) + ")")); //下移
                  }
            }
            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; //如果是第一行，则禁止上移
                  }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; //如果是最后一行，则禁止下移
                  }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>