元素上下移动

最新推荐文章于 2025-08-22 11:32:18 发布

iteye_20954

最新推荐文章于 2025-08-22 11:32:18 发布

阅读量100

点赞数

文章标签： xhtml javascript ViewUI

本文展示了一个HTML页面，其中包含一个动态调整行位置的表格。通过点击复选框，可以将选择的行上移或下移。适用于需要动态调整元素顺序的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#indItem :checkbox").click(function () { //设置表格中的每一个checkbox的点击事件 if ($(this).is(":checked")) { //如果此checbox是选中状态 var $curTR = $(this).parent().parent(); //此checkbox当前所在行 if ($curTR.index() == 0) { //如果是第一行, 则下移至表格最后一行 $curTR.appendTo($("#indItem")); } else { //否则上移一行. $curTR.after($curTR.prev()); } } }); }) </script> </head> <body> <input type="button" value="Test" onclick="test()" /> <table border="1" id="indItem" class="list_border_bg"> <col width="23px" /> <col width="190px" /> <col width="50px" /> <col width="100px" /> <col width="210px" /> <col width="105px" /> <tr> <INPUT type="hidden" name="hid_disp_num_digt" value="undefined"><INPUT type="hidden" name="hid_num_decm" value="undefined"><INPUT type="hidden" name="hid_listdisp_div" value="undefined"><INPUT type="hidden" name="hid_data_type_div" value="undefined"><INPUT type="hidden" name="hid_sufx_labl" value="undefined"><INPUT type="hidden" name="hid_ind_item_id" value="1001"><INPUT type="hidden" name="hid_listdisp_div_cd" value="undefined"><INPUT type="hidden" name="hid_dsc" value="undefined"><INPUT type="hidden" name="hid_num_digt" value="undefined"> <td class="list_data_bg_left" nowrap> <INPUT name="indItemCheck" type="checkbox" value="1"> </td> <td class="list_data_bg_left" nowrap title="bbbbb"> <div class="bpr_nowrap" style="width:191px;"> aaaaa </div> </td> <td class="list_data_bg_left" nowrap>共有項目</td> <td class="list_data_bg_left" nowrap> <INPUT name="req_flg" type="radio" checked value="1">必須 <INPUT name="req_flg" type="radio" value="0">任意 </td> <td class="list_data_bg_left" nowrap> <INPUT readonly name="dflt_str_val" size="20" type="text" value="abcde"> </td> <td class="list_data_bg" nowrap> <table cellpadding="0" cellspacing="0" align="left" border="0"> <tr> <td class="list_data_bg_left"> </td> <td class="list_data_bg_right"> <a href="javascript:deleteIndItem()">削除</a> </td> </tr> </table> </td> </tr> <tr> <INPUT type="hidden" name="hid_disp_num_digt" value="undefined"><INPUT type="hidden" name="hid_num_decm" value="undefined"><INPUT type="hidden" name="hid_listdisp_div" value="undefined"><INPUT type="hidden" name="hid_data_type_div" value="undefined"><INPUT type="hidden" name="hid_sufx_labl" value="undefined"><INPUT type="hidden" name="hid_ind_item_id" value="1004"><INPUT type="hidden" name="hid_listdisp_div_cd" value="undefined"><INPUT type="hidden" name="hid_dsc" value="undefined"><INPUT type="hidden" name="hid_num_digt" value="undefined"> <td class="list_data_bg_left" nowrap> <INPUT name="indItemCheck" type="checkbox" value="1"> </td> <td class="list_data_bg_left" nowrap title="eeeee"> <div class="bpr_nowrap" style="width:191px;"> bbbbb </div> </td> <td class="list_data_bg_left" nowrap> 共有項目 </td> <td class="list_data_bg_left" nowrap> <INPUT name="req_flg" type="radio" checked value="1">必須 <INPUT name="req_flg" type="radio" value="0">任意 </td> <td class="list_data_bg_left" nowrap> <INPUT readonly name="dflt_str_val" size="20" type="text" value="DEF"> </td> <td class="list_data_bg" nowrap> <table cellpadding="0" cellspacing="0" align="left" border="0"> <tr> <td class="list_data_bg_left"> </td> <td class="list_data_bg_right"> <a href="javascript:deleteIndItem()">削除</a> </td> </tr> </table> </td> </tr> <tr> <INPUT type="hidden" name="hid_disp_num_digt" value="undefined"><INPUT type="hidden" name="hid_num_decm" value="undefined"><INPUT type="hidden" name="hid_listdisp_div" value="undefined"><INPUT type="hidden" name="hid_data_type_div" value="undefined"><INPUT type="hidden" name="hid_sufx_labl" value="undefined"><INPUT type="hidden" name="hid_ind_item_id" value="1004"><INPUT type="hidden" name="hid_listdisp_div_cd" value="undefined"><INPUT type="hidden" name="hid_dsc" value="undefined"><INPUT type="hidden" name="hid_num_digt" value="undefined"> <td class="list_data_bg_left" nowrap> <INPUT name="indItemCheck" type="checkbox" value="1"> </td> <td class="list_data_bg_left" nowrap title="eeeee"> <div class="bpr_nowrap" style="width:191px;"> ccccc </div> </td> <td class="list_data_bg_left" nowrap> 共有項目 </td> <td class="list_data_bg_left" nowrap> <INPUT name="req_flg" type="radio" checked value="1">必須 <INPUT name="req_flg" type="radio" value="0">任意 </td> <td class="list_data_bg_left" nowrap> <INPUT readonly name="dflt_str_val" size="20" type="text" value="DEF"> </td> <td class="list_data_bg" nowrap> <table cellpadding="0" cellspacing="0" align="left" border="0"> <tr> <td class="list_data_bg_left"> </td> <td class="list_data_bg_right"> <a href="javascript:deleteIndItem()">削除</a> </td> </tr> </table> </td> </tr> </table> </body> </html>