jQuery实现table中的tr上下移动并保持序号不变的实例代码

2024-05-06 14:54:49

字体：大中小

来源：转载

供稿：网友

jQueryMoveTr.html

代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE>jQuery-bhang</TITLE> <script type="text/javascript" src="jquery-1.6.2.js"></script> <script type="text/javascript" src="jquery-rlutil-1.6.2.js"></script> </HEAD> <BODY>  <table id="show_table_id" border="1">    <tr>      <td class="td_num"><input type="text" name="td_num_tn" readonly="true" style="border:0px; width:10px;" value="1" /></td>      <td>aaaaaaaaaa</td>      <td>@@@@@@@</td>      <td align="center"><input type="button" name="btn1" value="↑" onclick="prevMoveTrCommand(this, 'show_table_id', 'td_num');" />  <input type="button" name="btn2" value="↓" onclick="nextMoveTrCommand(this, 'show_table_id', 'td_num');" /></td>      <td>注释1</td>    </tr>    <tr>      <td class="td_num"><input type="text" name="td_num_tn" readonly="true" style="border:0px; width:10px;" value="2" /></td>      <td>bbbbbbbbbbbbb</td>      <td>#########</td>      <td align="center"><input type="button" name="btn1" value="↑" onclick="prevMoveTrCommand(this, 'show_table_id', 'td_num');" />  <input type="button" name="btn2" value="↓" onclick="nextMoveTrCommand(this, 'show_table_id', 'td_num');" /></td>      <td>注释2</td>    </tr>    <tr>      <td class="td_num"><input type="text" name="td_num_tn" readonly="true" style="border:0px; width:10px;" value="3" /></td>      <td>cccccccccccc</td>      <td>$$$$$$$$$$$$</td>      <td align="center"><input type="button" name="btn1" value="↑" onclick="prevMoveTrCommand(this, 'show_table_id', 'td_num');" />  <input type="button" name="btn2" value="↓" onclick="nextMoveTrCommand(this, 'show_table_id', 'td_num');" /></td>      <td>注释3</td>    </tr>    <tr>      <td class="td_num"><input type="text" name="td_num_tn" readonly="true" style="border:0px; width:10px;" value="4" /></td>      <td>ddddddddddddd</td>      <td>&&&&&&&&&&&&&</td>      <td align="center"><input type="button" name="btn1" value="↑" onclick="prevMoveTrCommand(this, 'show_table_id', 'td_num');" />  <input type="button" name="btn2" value="↓" onclick="nextMoveTrCommand(this, 'show_table_id', 'td_num');" /></td>      <td>注释4</td>    </tr>    <tr>      <td class="td_num"><input type="text" name="td_num_tn" readonly="true" style="border:0px; width:10px;" value="5" /></td>      <td>eeeeeeeeeeeeee</td>      <td>***************</td>      <td align="center"><input type="button" name="btn1" value="↑" onclick="prevMoveTrCommand(this, 'show_table_id', 'td_num');" />  <input type="button" name="btn2" value="↓" onclick="nextMoveTrCommand(this, 'show_table_id', 'td_num');" /></td>      <td>注释5</td>    </tr>  </table> </BODY></HTML>

上一篇：Bootstrap3制作搜索框样式的方法

下一篇：浅谈javascript中的加减时间