js实现表格上移下移功能

最新推荐文章于 2023-10-07 16:10:34 发布
最新推荐文章于 2023-10-07 16:10:34 发布
阅读量2.2k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wmeng13/article/details/91960668
版权
本文介绍了如何使用JavaScript实现表格中行的上移和下移功能，通过选择表格行并执行特定操作，实现数据的动态调整，提升用户体验。

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表格操作</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .cme-table {
            margin: 50px 0 0 50px;
        }

        .cme-table table {
            border-collapse: collapse;
        }

        .cme-table thead tr th {
            border: 1px solid #ddd;
            width: 120px;
            height: 50px;
            background: #f5f5f5;
            font-weight: bold;
            font-size: 12px;
            color: #333;
        }

        .cme-table tbody tr td {
            border: 1px solid #ddd;
            text-align: center;
            font-size: 12px;
            color: #333;
            height: 30px;
        }

        .cme-table tbody tr:hover {
            background: #f8f8f8;
        }

        a {
            color: #000;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <div class='cme-table'>
        <div class='cme-fixed-table-container'>
            <table cellspacing="0" cellpadding="0">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>姓名</th>
                        <th>人员属性</th>
                        <th>年度</th>
                        <th>月份</th>
                        <th>日期</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td class='table-operation'>
                            <a href="javascript:;" class='up'>上移</a>
                            <a href="javascript:;" class='down'>下移</a>
                        </td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>2</td>
                        <td>2</td>
                        <td>2</td>
                        <td>2</td>
                        <td>2</td>
                        <td class='table-operation'>
                            <a href="javascript:;" class='up'>上移</a>
                            <a href="javascript:;" class='down'>下移</a>
                        </td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>3</td>
                        <td>3</td>
                        <td>3</td>
                        <td>3</td>
                        <td>3</td>
                        <td class='table-operation'>
                            <a href="javascript:;" class='up'>上移</a>
                            <a href="javascript:;" class='down'>下移</a>
                        </td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>4</td>
                        <td>4</td>
                        <td>4</td>
                        <td>4</td>
                        <td>4</td>
                        <td class='table-operation'>
                            <a href="javascript:;" class='up'>上移</a>
                            <a href="javascript:;" class='down'>下移</a>
                        </td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>5</td>
                        <td>5</td>
                        <td>5</td>
                        <td>5</td>
                        <td>5</td>
                        <td class='table-operation'>
                            <a href="javascript:;" class='up'>上移</a>
                            <a href="javascript:;" class='down'>下移</a>
                        </td>
                    </tr>
                    <tr>
                        <td>6</td>
                        <td>6</td>
                        <td>6</td>
                        <td>6</td>
                        <td>6</td>
                        <td>6</td>
                        <td class='table-operation'>
                            <a href="javascript:;" class='up'>上移</a>
                            <a href="javascript:;" class='down'>下移</a>
                        </td>
                    </tr>
                    <tr>
                        <td>7</td>
                        <td>7</td>
                        <td>7</td>
                        <td>7</td>
                        <td>7</td>
                        <td>7</td>
                        <td class='table-operation'>
                            <a href="javascript:;" class='up'>上移</a>
                            <a href="javascript:;" class='down'>下移</a>
                        </td>
                    </tr>
                    <tr>
                        <td>8</td>
                        <td>8</td>
                        <td>8</td>
                        <td>8</td>
                        <td>8</td>
                        <td>8</td>
                        <td class='table-operation'>
                            <a href="javascript:;" class='up'>上移</a>
                            <a href="javascript:;" class='down'>下移</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <script src="jquery.js"></script>
    <script>
        $(document).on('click', '.up', function () {
            var ind = $(this).parents('tr').index();
            if (ind == 0) {
                alert('已经是最上层了！');
                return false;
            }
            var trs = $(this).parents('tr').clone(true);
            $(this).parents('table tbody').find('tr').eq(ind - 1).before(trs);
            $(this).parents('tr').remove();
            //重新添加序号
            drawOrder()
        });
        $(document).on('click', '.down', function () {
            var ind = $(this).parents('tr').index();
            if (($(this).parents("tr").index()) == ($(this).parents("table tbody").find("tr").length - 1)) {
                alert('已经是最下层了！');
                return false;
            }
            var trs = $(this).parents('tr').clone(true);
            $(this).parents('table tbody').find('tr').eq(ind + 1).after(trs);
            $(this).parents('tr').remove();
            //重新添加序号
            drawOrder();
        })
    </script>
</body>

</html>

 

JS实现表格数据上移下移
m0_71959044的博客
02-19 705
JS实现表格数据上移下移
JS实现的表格操作类详解(添加，删除，排序，上移，下移)
01-19
本文实例讲述了JS实现的表格操作类。分享给大家供大家参考，具体如下： 运行效果截图如下： 点击此处查看在线演示。 具体代码如下： <html> <head> <meta ...
JS实现一个列表中包含上移下移删除等功能
10-25
一个项目，包括了一个列表页其中包括在列表中实现上移，下移，删除等功能，为了用户体验，操作均使用JS实现
js table 行上移、下移
u011425213的专栏
07-22 3247
//使表格行上移，接收参数为链接对象 function moveUp(_a,orderId){  //通过链接对象获取表格行的引用 var _row=_a.parentNode.parentNode; //var curRow = null; var tdSeq = _row.rowIndex - 1; //如果不是第一行，则与上一行交换顺序 if(_row.previousSibl
js实现上移和下移
weixin_34238633的博客
12-28 972
class Utils { swapArray(arr, index1, index2) { arr[index1] = arr.splice(index2, 1, arr[index1])[0]; return arr; }, // 上移 将当前数组index索引与后面一个元素互换位置，向数组后面移动一位 moveUp(...
js表格行上下移动
weixin_30471561的博客
06-16 439
<script type="text/javascript"> function tagPosition() { $('#easyTables').tabs('select', '输出方式'); var rows = $('#dgTag').datagrid('getRows');//获取当前页的数据行 //var ary = new Ar...
js 控制 table 上下行移动
aaw42424的博客
08-23 263
<html><head><title>lk.jsp</title><scripttype="text/javascript">varo1,o2;varo1a=newArray();varo2a=newArray();functions...
利用jqgrid实现上移下移单元格功能
10-17
在本文中，我们将深入探讨如何使用jqGrid，一个基于jQuery的表格插件，来实现单元格的上移和下移功能。jqGrid提供了一种高效且灵活的方式来展示和操作表格数据，包括与服务器端的数据交互。当我们需要调整表格中数据...
基于js实现数组相邻元素上移下移
11-20
总的来说，这段代码提供了一个完整的解决方案，可以在JavaScript环境中实现数组元素的上移和下移功能，这对于需要动态调整列表顺序的Web应用来说非常实用。需要注意的是，这个实现假设数组索引是从0开始的，因此在...
jQuery实现表格行上移下移和置顶的方法
10-24
值得注意的是，本代码示例中的表格行上移、下移、置顶功能是通过添加淡出和淡入动画来实现平滑效果的，这不仅提供了更好的用户体验，也是目前前端动态效果常用的一种手法。 最后，本文的标签中提到的“jQuery 表格...
js表格行上移下移置顶置底
12-19
支持所有浏览器，包过IE6-8,支持多选行操作，支持不连续选择行表格操作，操作按钮单独分开的。
js操作table中tr的顺序实现上移下移一行的效果
10-17
主要介绍了js操作table中tr的顺序实现上移下移一行的效果 ,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
JS控制HTMLDOM表格行上下移动
03-19
NULL 博文链接：https://shirleyit.iteye.com/blog/717864
JS实现的表格行上下移动操作示例
10-21
主要介绍了JS实现的表格行上下移动操作,涉及javascript针对页面元素节点与属性的相关操作技巧,需要的朋友可以参考下
JQuery操作表格（附源码）实现tr上下移动。
03-21
基于JQuery的操作表格附源码，实现html中table的tr的添加、删除以及上下移动。
js表格数据上移，下移功能
最新发布
NIKCFNIF_66666的博客
10-07 346
【代码】js表格数据上移，下移功能。
js实现表格数据上移和下移
sober_girl的博客
04-13 1567
js实现表格数据上移和下移 上移 // row为移动的数组，idx:为上前移动的数据的索引 topMove(row,idx){ row[idx] = row.splice（idx -1 ,1,row）[0] } 下移 // row为移动的数组，idx:为上前移动的数据的索引 topMove(row,idx){ row[idx] = row.splice（idx + 1 ,1,row）[0] } 此处未考虑第一个数据上移和最后一个数据下移问题，大家自己转化即可。 ...
JS实现上移下移功能
ykblog.github.io
12-14 3839
下面代码可直接运行  上移下移 function test1(id) { var row = document.getElementById(id).parentElement.parentElement.rowIndex; if(row==1){ alert(' 当前最大值，无需上移'); }else{ //上一行的名称列值 var htm1=document
JS实现的表格行上下移动操作小案例
javaboy
04-07 2727
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;met
实现表格行列操作：上移、下移、置顶、置底功能
本知识点将着重介绍如何使用JavaScript来操作HTML表格（table）中的行（tr元素），实现行的上移、下移、置顶和置底功能，这些操作在数据展示、表格管理等场景中非常常见和有用。 首先，我们来探讨实现这些功能可能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值