前端表格实现上下移动

最新推荐文章于 2022-06-22 15:13:08 发布
最新推荐文章于 2022-06-22 15:13:08 发布
阅读量1.9k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hupan_Pan/article/details/83114371
版权

利用jq中的

current.insertBefore(prev);
current.insertAfter(next);

<html xmlns="http://www.w3.org/1999/xhtml">
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>表格</title> 
  <style type="text/css">
.editText
{
    border-width:1px;
    border-top-style:none;
    border-left-style:none;
    border-right-style:none;
    border-bottom-style:solid;
    border-color:#030;
    width:100%;
}
</style> 
  <script src="jquery.js" type="text/javascript">
</script> 
  <script type="text/javascript">
function moveUp(obj)
{
    var current=$(obj).parent().parent();
    var prev=current.prev();
    if(current.index()>1)
    {
        current.insertBefore(prev);
    }
}
function moveDown(obj)
{
    var current=$(obj).parent().parent();
    var next=current.next();
    if(next)
    {
        current.insertAfter(next);
    }
}
</script> 
 </head> 
 <body> 
  <table class="grid" width="100%" border="1" cellspacing="0" cellpadding="0"> 
   <tbody>
    <tr> 
     <td>字段英文名</td> 
     <td>字段中文名</td> 
     <td>字段数据类型</td> 
     <td>列宽</td> 
     <td>是否显示</td> 
     <td>是否作为查询条件</td> 
     <td>调整顺序</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td><input type="text" name="textfield" class="editText" id="textfield" /></td> 
     <td> </td> 
     <td><input type="text" name="textfield5" id="textfield5" /></td> 
     <td><input type="checkbox" name="checkbox" id="checkbox" /></td> 
     <td><input type="checkbox" name="checkbox5" id="checkbox5" /></td> 
     <td><a href="javascript:void(0)" οnclick="moveUp(this)">上移</a><a href="javascript:void(0)" οnclick="moveDown(this)">下移</a></td> 
    </tr> 
    <tr> 
     <td>2</td> 
     <td><input type="text" name="textfield2" id="textfield2" /></td> 
     <td> </td> 
     <td><input type="text" name="textfield6" id="textfield6" /></td> 
     <td><input type="checkbox" name="checkbox2" id="checkbox2" /></td> 
     <td><input type="checkbox" name="checkbox6" id="checkbox6" /></td> 
     <td><a href="javascript:void(0)" οnclick="moveUp(this)">上移</a><a href="javascript:void(0)" οnclick="moveDown(this)">下移</a></td> 
    </tr> 
    <tr> 
     <td>3</td> 
     <td><input type="text" name="textfield3" id="textfield3" /></td> 
     <td> </td> 
     <td><input type="text" name="textfield7" id="textfield7" /></td> 
     <td><input type="checkbox" name="checkbox3" id="checkbox3" /></td> 
     <td><input type="checkbox" name="checkbox7" id="checkbox7" /></td> 
     <td><a href="javascript:void(0)" οnclick="moveUp(this)">上移</a><a href="javascript:void(0)" οnclick="moveDown(this)">下移</a></td> 
    </tr> 
    <tr> 
     <td>4</td> 
     <td><input type="text" name="textfield4" id="textfield4" /></td> 
     <td> </td> 
     <td><input type="text" name="textfield8" id="textfield8" /></td> 
     <td><input type="checkbox" name="checkbox4" id="checkbox4" /></td> 
     <td><input type="checkbox" name="checkbox8" id="checkbox8" /></td> 
     <td><a href="javascript:void(0)" οnclick="moveUp(this)">上移</a><a href="javascript:void(0)" οnclick="moveDown(this)">下移</a></td> 
    </tr> 
   </tbody>
  </table>  
 </body>
</html>

Hupan_Pan
关注
拖放表格行
liuhao9999的博客
07-26 221
值得注意的是，在克隆每个项目中的单元格时，我们必须将单元格宽度设置为与原始单元格相同。，现在可以很容易地检查用户是否掉到了表格的顶部或底部。现在我们可以使用相同的技术应用于表格行。在这一步之后，我们有以下内容。确定拖动行和目标行的索引。当用户移动一行时克隆表。...
table表格内容上下移动的三种实现方法
05-07
该代码为大家展示了table表格内容上下移动的三种实现方式，通俗易懂
JS控制HTML表格行上下移动
iteye_15823的博客
12-05 2089
[b]补充一下：[/b]重新调整了CSS和JS的浏览器兼容，希望大家多多指教，ThankYou！ Table test table { width: 300px; border: 1px solid black; } .table2 { width: 300px; border: 0px; } td { border: 1px solid black; ...
table表格上移下移操作方法总结
LLL15003978801的博客
08-09 971
//上移函数 upGo = (dataSource, index) => { if (index != 0) { dataSource[index] = dataSource.splice(index - 1, 1, dataSource[index])[0]; } else { dataSource.push(dataSource.shift()); } }; //下移函数 downGo = (dataSource, index) => { if (index != dataSource.le
JS控制HTMLDOM表格行上下移动
03-19
NULL 博文链接：https://shirleyit.iteye.com/blog/717864
jQuery实现表格行上下移动和置顶效果
10-24
本文主要介绍了使用jQuery实现表格行上下移动和置顶效果的方法，通过在前端页面上通过点击不同的链接实现行数据的动态排序，包含了核心代码和对代码的详细解释。 知识点一：引入jQuery库 在开始编写JavaScript代码...
Vue实现table上下移动功能示例
10-17
Vue实现表格上下移动功能涉及了几个关键知识点，包括使用Element UI组件库，如何利用Vue的响应式系统动态操作数据以及如何在不刷新页面的情况下更新视图。下面是详细的知识点解析： 1. **Element UI组件库**： ...
javaScript+html实现表格上下移动.zip
最新发布
01-05
这个压缩包"javaScript+html实现表格上下移动.zip"包含的资源很可能是用于演示如何通过JavaScript来实现在HTML表格中行的上下移动功能。这个功能对于动态交互的数据展示非常有用，比如用户可以调整数据的顺序或进行...
jquery实现的可增加，删除行，可多行上下移动表格
07-27
标题 "jquery实现的可增加，删除行，可多行上下移动表格" 描述了一种使用JavaScript库jQuery创建的交互式表格功能。这个功能允许用户在表格中动态添加、删除行，以及上下移动表格中的行，提供了更灵活的数据操作体验...
jquery操作表格上下移动行
ptzrbin的专栏
04-18 3823
jquery表格操作 添加一行  删除一行  上移  下移 序号步骤名称步骤描述相关操作 var currentStep=0; var max_line_num=0; function add_line(){ max_line_num=$("#content tr:last-child").children("td").html();
Datatable表格展示前端插件
07-26
主要为数据的表格展示，包括分页功能，数据为空的提示等，搜索等
html5表格行的拖拽
03-08
这是一个用HTML5实现表格拖拽对的小例子
前端表单上下移动接口实现
如漩涡的博客
01-25 1619
要求：项目中遇到前端页面读取完数据后，需要对排序进行上下移动 思路：让前端传入两个参数，一个是状态，0前进，1后退，再把当前的sort值发送到后台，后台根据当前的状态值，判断前进还是后退；根据传入的sort去查找当前这条记录，对sort进行+1或者-1的更新操作，再把数据通过 ORDER BY 函数进行排序发送给前端页面 实现：    据传入的sort去查找当前这条记录，对s
如何移动一个表单到中心 margin
weixin_45545764的博客
07-19 137
通过margin可以移动元素 如：此时表单元素在顶部 加入<style> .container{ margin: 210px auto; } </style>后
添加、删除、上移、下移按钮的实现
草木红的博客
03-14 1391
对表格中的<tr></tr>整体进行添加、删除、上移、下移操作。并自动处理排序和按钮。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width
php如何让表格往左边移动,html怎么把表格移到左边
weixin_42297605的博客
03-23 1503
1. HTML在div里怎样让表格往右移动一点想要达到在div里让表格往右移动一点，可以调整盒子的左边距大小，来达到向右移动的效果。margin-left 属性设置元素的左外边距。padding-left 属性设置元素左内边距。这两种都是可以实现的，表格向右移动，具体使用看DIV而定。如下，使用margin-left的代码为：FMFMFMFMFMFMFMFMFMFMFMFMFMFMFMFMF...
html语言中移动表格,Html中表格行的拖动
weixin_36239866的博客
05-31 724
表格行拖动window.onload = function(){//绑定事件var addEvent = document.addEventListener ? function(el,type,callback){el.addEventListener( type, callback, !1 );} : function(el,type,callback){el.attachEvent( "on...
强大的表格组件gridmanager，支持vue react jquery angular
qq_44146522的博客
06-22 909
强大的表格组件gridmanager，支持vue react jquery angular
鼠标拖拽表格table的tr上下移动
sdiudui的博客
04-12 4828
小伙伴们肯定在某个项目里遇到要拖拽table表格的tr或者td那么下面就来讲一下，话不多说直接上代码1，引用插件&lt;script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;这两个是主要插件百度自行下载去吧，要放在jquery.min.js下面哦&lt;link rel="styleshee...
vue前端表格上下移动排序同时更新后台数据库
09-01
实现Vue前端表格的上下移动排序并同时更新后台数据库，可以采取以下步骤： 1. 在Vue组件中，通过获取后台数据库中的原始数据，将数据渲染到表格中。 2. 在表格的每一行中，添加上下移动的按钮，通过点击按钮触发移动操作。 3. 给每个按钮绑定对应的点击事件，通过事件处理函数进行上下移动操作。 4. 在事件处理函数中，根据移动的方向和当前行的索引，交换当前行和目标行的位置。 5. 同时，还需要更新后台数据库，将调整后的排序结果保存到数据库中。 6. 可以通过发送Ajax请求或使用异步请求库（例如axios）将更新后的数据传递给后台服务器。 7. 在后台服务器中，接收到请求后，处理接收到的数据，并进行相应的数据库操作，将新的排序结果保存到数据库中。 总结起来，实现Vue前端表格的上下移动排序并同时更新后台数据库，关键是在前端实现移动操作后，将调整后的数据及时传递给后台进行数据库的更新操作，确保前端和后台数据的同步。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值