元素上下移动

最新推荐文章于 2021-06-03 13:54:01 发布
最新推荐文章于 2021-06-03 13:54:01 发布
阅读量1k 收藏
点赞数
分类专栏： 前端 - jQuery 文章标签： class input list div border javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yenange/article/details/7003339
版权 
<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" οnclick="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>
吉普赛的歌
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
18.01.25
yw2567的博客
01-25 202
快捷键 加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl + Q 插入链接 Ctrl + L 插入代码 Ctrl + K 插入图片 Ctrl + G 提升标题 Ctrl + H 有序列表 Ctrl + O 无序列表 Ctrl + U 横线 Ctrl + R 撤销 Ctrl + Z 重做 Ctrl + Y
元素的移动
JiangLittleBai的博客
10-22 325
通过JavaScript控制元素的移动 1、元素的移动 1.1 目标 元素每0.1s移动10px 。从位置A水平移动到位置B，移动到指定位置后停止移动 1.2 思路 将元素设为absolute，脱离文档流。 每0.1s将元素的left值增加10px。直到移动到指定位置。 1.3 基本代码如下 <div class="kuang"> <div class="ele"></div> </div> .kuan
使用css属性，使div上下左右移动
热门推荐
qq_26780317的博客
05-28 16万+
    在html中，有时需要使某个div上下左右移动，使div元素位置产生偏移。本文使用了css3的transform:translate(X,Y)，和css的相对定位来实现div元素的偏移。一、使用css3 transform:translate(X,Y)来偏移元素    transform属性应用于元素的2D或3D转换，这个属性允许你将元素旋转，缩放，移动，倾斜等。值描述none定义不进行转...
表单验证关键字（datatype）之Validform函数验证
总有人会愿意找寻你
01-23 1814
博主就边讲边上代码吧。以往对表单当中的判空验证通常是失焦burl()和聚焦focus()事件进行操作，这是很久的一种方式；今天博主就分享一下比较新式一点的： &lt;td class="bggrayLeft30"&gt;&lt;input type="text" id="bioName" datatype="*" nullmsg="请输入药品名称！" name="
数组元素的上下移动
FE 技术学习
11-30 1457
// 交换数组元素 var swapItems = function(arr, index1, index2) { arr[index1] = arr.splice(index2, 1, arr[index1])[0];      return arr; }; // 上移 const newArray = swapItems(arr, $index, $index -
实现元素的左右移动
jelly_tea的博客
09-18 1581
实现元素的左右移动 我们先来看一下要实现的效果，如下图所示那样，让方框内的元素左右移动。 首先，先写一个简单的结构 <div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> 写好了HTML的结构，接下来给元素写样式
Javascript实现数组中的元素上下移动
12-10
我们交换数组可以实现元素上下移动了，这个效果我们在表格或以前排序算法中都会用到，下面来看一个JavaScript下实现交换数组元素上下移动例子 在写项目的时候，要实现一个数组记录上下移动的示例。写起来也没有没...
jquery实现tr元素的上下移动示例代码
10-26
让tr元素的上下移动的方法有很多，本文为大家介绍下使用jquery是实现的，感兴趣的朋友可以参考下
Vue实现table上下移动功能示例
10-17
主要介绍了Vue实现table上下移动功能,结合实例形式分析了vue.js针对table表格元素动态操作相关实现技巧,需要的朋友可以参考下
JavaScript Select和Option列表元素上下左右移动
10-30
JavaScript Select和Option列表元素上下左右移动 在这个资源中，我们将要讨论如何使用 JavaScript 实现 Select 和 Option 列表元素的上下左右移动功能。这个功能支持一次选中多项在左右列表中来回移动，非常适合在...
JS—实现元素上下左右移动
spfLinux的博客
10-13 5787
Document a { cursor: pointer; } #cell { width: 30px; height: 30px; background: red; position: relative; left: 0; top: 0; } 友情提示：请按键盘上的上下左右键 function move() {
Jquery 控制元素 上 下 移动
weixin_33809981的博客
02-10 218
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="jquery.js" type="text/javascript"></script> <script type="text/j...
html元素上下移动,一个可以上下摆动的html元素
weixin_39579127的博客
06-03 402
就是一个简单CSS3 动画.light_pc {width: 93px;height: 9px;position: absolute;top: 0;left: 50%;margin-left: -46px;background: url(https://zm.res.netease.com/pc/fab/20161226201931/img/light_pc_f3d5dee.png?_sprite...
jquery获取表单值的利器：serialize()
我想我是海 冬天的大海 心情随风轻摆
01-06 1万+
前台：[切记：每个表单元素， 都应该带有name， 否则是取不到的。]                     function test() {             $("#Action").val(1);             var vals = $("#tableForm :input").serialize(); //var vals = $("#form1").s
jquery增加/删除列
我想我是海 冬天的大海 心情随风轻摆
03-30 1万+
<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <mce:script src="js/jquery-1.4.1.min.js" mce_src=
jQuery获取表格第一列的值
我想我是海 冬天的大海 心情随风轻摆
12-23 8893
[!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> [html xmlns="http://www.w3.org/1999/xhtml"> [head>     [title>无标题页[/title>     [script src="js/jquery-1.4.2.min.js" type="
jquery元素上下换
最新发布
11-29
以下是使用jQuery实现元素上下移动的示例代码： ```javascript // 将元素向上移动 $("#element").prev().before($("#element")); // 将元素向下移动 $("#element").next().after($("#element")); ``` 其中，`#...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值