js操作table中tr的顺序，实现上移下移一行的效果

最新推荐文章于 2021-03-12 10:32:35 发布
最新推荐文章于 2021-03-12 10:32:35 发布
阅读量312 收藏
点赞数
原文链接：http://www.cnblogs.com/leiyongbo/p/9996674.html
版权

总体思路是在table外部加个div，修改div的innerHtml实现改变tr顺序的效果

具体思路是

获取当前要移动tr行的rowIndex，在table中删除掉，然后循环table的rows，到了目标行再直接加进去，最后把整体的html赋值给div完成效果

js代码如下

        //使行向上一行
        function setRowUp(obj) {
            if (obj.parentNode.parentNode.rowIndex != 1) {
                var tab = obj.parentNode.parentNode.parentNode;
                var nowNodeInnerHtml = obj.parentNode.parentNode.innerHTML;
                var nowNowIndex = obj.parentNode.parentNode.rowIndex;
                tab.deleteRow(nowNowIndex);
                var newHtml = "<table cellpadding=\"5\" cellspacing=\"0\">";
                newHtml += ("<TR style='font-weight: bold; text-align: center;'>" + tab.rows[0].innerHTML + "</TR>");
                for (i = 1; i < tab.rows.length; i++) {
                    if (i == (nowNowIndex - 1)) {
                        newHtml += ("<TR>" + nowNodeInnerHtml + "</TR>");
                    }
                    newHtml += ("<TR>" + tab.rows[i].innerHTML + "</TR>");
                }
                newHtml += "</table>";
                document.getElementById("divContent").innerHTML = newHtml;
            }
        }
        //使行向下一行
        function setRowDown(obj) {
            if (obj.parentNode.parentNode.rowIndex != (document.getElementById("divContent").childNodes[0].rows.length - 1)) {
                var tab = obj.parentNode.parentNode.parentNode;
                var nowNodeInnerHtml = obj.parentNode.parentNode.innerHTML;
                var nowNowIndex = obj.parentNode.parentNode.rowIndex;
                tab.deleteRow(nowNowIndex);
                var newHtml = "<table cellpadding=\"5\" cellspacing=\"0\">";
                newHtml += ("<TR style='font-weight: bold; text-align: center;'>" + tab.rows[0].innerHTML + "</TR>");
                for (i = 1; i < tab.rows.length; i++) {
                    if (i == (nowNowIndex + 1)) {
                        newHtml += ("<TR>" + nowNodeInnerHtml + "</TR>");
                    }
                    newHtml += ("<TR>" + tab.rows[i].innerHTML + "</TR>");
                }
                //向下可能到表格现有行数外 额外处理
                if (tab.rows.length == (nowNowIndex + 1)) {
                    newHtml += ("<TR>" + nowNodeInnerHtml + "</TR>");
                }
                newHtml += "</table>";
                document.getElementById("divContent").innerHTML = newHtml;
            }
        }

测试html代码如下

<body>
    <div id="divContent">
        <table cellpadding="5" cellspacing="0">
            <tr style='font-weight: bold; text-align: center;'><td>工号</td><td>姓名</td></tr>
            <tr><td>0001
                <input type="button" value="↑" onclick="setRowUp(this)" />
                <input type="button" value="↓" onclick="setRowDown(this)" />
                </td><td>姓名01</td></tr>
            <tr><td>0002
                <input type="button" value="↑" onclick="setRowUp(this)" />
                <input type="button" value="↓" onclick="setRowDown(this)" />
                </td><td>姓名02</td></tr>
            <tr><td>0003
                <input type="button" value="↑" onclick="setRowUp(this)" />
                <input type="button" value="↓" onclick="setRowDown(this)" />
                </td><td>姓名03</td></tr>
            <tr><td>0004
                <input type="button" value="↑" onclick="setRowUp(this)" />
                <input type="button" value="↓" onclick="setRowDown(this)" />
                </td><td>姓名04</td></tr>
            <tr><td>0005
                <input type="button" value="↑" onclick="setRowUp(this)" />
                <input type="button" value="↓" onclick="setRowDown(this)" />
                </td><td>姓名05</td></tr>
        </table>
    </div>
</body>

 

转载于:https://www.cnblogs.com/leiyongbo/p/9996674.html

weixin_33797791
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js操作table中tr的顺序实现上移下移一行的效果
10-17
主要介绍了js操作table中tr的顺序实现上移下移一行的效果 ,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
JQuery实现table中tr上移下移的示例(超简单)
10-18
下面小编就为大家分享一篇JQuery实现table中tr上移下移的示例(超简单)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
table 上移 下移 保存时 获取每行中的值 将排序记录保存到数据库
jkjlovezy_4的专栏
08-07 734
<% String path = request.getContextPath(); %> 应用之星后台管理 /js/jquery-1.4.2.js"> var moveRow; function checkNews(obj){ moveRow = obj.parentNode; //alert(moveRow.innerHTML); var t
JQuery实现table中tr上移下移
一包大豫竹的博客
01-03 2881
表格样式<table> <tr> <td><input type="button" value="上移" onclick="moveUp(this)"/></td> <td><input type="button" value="下移" onclick="moveDown(this)"/></td> </tr> <tr>
原生js实现：表头固定+表体每秒向上滚动一行+滚动到无数据时重新回滚到顶部+可以自定义滚动行数
weixin_43848571的博客
01-08 683
描述：原生js开发的一个表格走马灯通用组件，表格表头固定，表体内容可每秒向上滚动一行，（表格内容可通过数组动态循环渲染），表体内容滚动到最后一个时，数据回滚到顶部，重新开始 自下向上 滚动，表体内容展示单元格行数，单元格长度宽度都可以自定义。 实现效果如下： 代码如下： <body> <table> <thead> <tr> <th>ID</th> <th>姓名&lt
js实现table添加行tr、删除行tr、清空行tr的简单实例
10-21
下面小编就为大家带来一篇js实现table添加行tr、删除行tr、清空行tr的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
在表table最前插入tr多行并改为正常排列的序号
透明大脑
04-12 4465
测试页面           --> 这是默认第一行td --> --> -->     rowspan="1" aria-controls="sample_editable_1" tabindex="0" role="columnheader">序号 rowspan="1" aria-controls=
无缝滚动—marquee实现向上滚动（适合发布通告）
weixin_34413103的博客
01-19 269
<marquee direction="up" width=650 height=200 scrollamount=5 scrolldelay=10 behavior=sroll loop=-1 onmouseover='this.stop();' onmouseout='this.start()'><table><tr><td>姓名0</td...
一行一行向上循环滚动
weixin_33852020的博客
11-22 431
表格向上循环滚动： css: 　　.table{ 　　　　width: 100%; 　　　　left:30%; 　　　　border-collapse:collapse; 　　　　border-spacing:0;　　}　　.fixedThead{ 　　　　display: block; 　　　　width: 100%;　　}　　.scrollTbody{ ...
js上移下移功能
susuzhe
03-15 4243
今天分享一下项目里面用到的一个小功能，实现上移下移的功能。 上移 下移 上移 下移 上移 下移 这里样式的话就不写了，可以根据自己的需求来定义，主要的还是逻辑部分。 var moveUporDown= {
table行的上移下移 上下移动
weixin_30487701的博客
11-30 999
<script type="text/javascript"> $(document).ready(function () { $('.moveup').bind('click', function (e) { var obj = $(e.target).closest('tr'); c_pre($...
前端面试题目搜集
weixin_34275734的博客
12-01 7668
最近读到一本与前端面试有关的书《前端程序员面试笔试宝典》，里面的内容很多都是高频的面试题，在此推荐给各位网友。 一、理论知识 1.1、前端 MV*框架的意义 早期前端都是比较简单，基本以页面为工作单元，内容以浏览型为主，也偶尔有简单的表单操作，基本不太需要框架。 随着 AJAX 的出现，Web2.0的兴起，人们可以在页面上可以做比较复杂的事情了，然后前端框架才真正出现了。 如果是页面...
js在table指定tr行上或底下添加tr行
weixin_34380948的博客
11-10 701
js在table指定tr行上或下面添加tr行 function onAddTR(trIndex)         {             var tb = document.getElementById("tb1");             var newTr = tb.insertRow(trIndex);//添加新行，trIndex就是要添加的位置             var ...
jquery实现文字上下循环无缝滚动效果
马克斯先生的博客
03-12 1423
<!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> <meta http-equiv="Content-Type" content="text/html; charset
table头部固定，内容滚动，类似新闻一下向上滚动
12-06 180
html: <div class="ul_box"> <table class="table1"> <thead> <tr> <th>11111111111</th> <th>1...
table的tr行移
weixin_34319111的博客
07-12 188
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table的tr行移</title> <style> .my_tab{ ...
Vue中table实现行的上移和下移调用接口
最新发布
05-27
在Vue中实现table行的上移和下移，需要先在表格中添加对应的操作按钮，然后在点击按钮时调用接口进行数据的上移或下移操作。具体实现步骤如下： 1. 在表格中添加上移和下移按钮，可使用element-ui中的按钮组件： ``` <el-table-column label="操作"> <template slot-scope="scope"> <el-button type="text" icon="el-icon-arrow-up" @click="handleMoveUp(scope.row)">上移</el-button> <el-button type="text" icon="el-icon-arrow-down" @click="handleMoveDown(scope.row)">下移</el-button> </template> </el-table-column> ``` 2. 在methods中定义handleMoveUp和handleMoveDown方法，分别调用接口进行数据上移和下移操作： ``` methods: { // 上移操作 handleMoveUp(row) { const index = this.tableData.indexOf(row) if (index > 0) { // 调用上移接口 this.$axios.post('/api/moveUp', {id: row.id}).then(res => { this.tableData.splice(index, 1) this.tableData.splice(index - 1, 0, row) }) } }, // 下移操作 handleMoveDown(row) { const index = this.tableData.indexOf(row) if (index < this.tableData.length - 1) { // 调用下移接口 this.$axios.post('/api/moveDown', {id: row.id}).then(res => { this.tableData.splice(index, 1) this.tableData.splice(index + 1, 0, row) }) } } } ``` 3. 在接口中实现数据上移和下移操作，可使用数据库中的排序字段进行排序： ``` // 上移接口 app.post('/api/moveUp', (req, res) => { const id = req.body.id // 查询当前行和前一行的数据 const sql = `SELECT *, (SELECT sort FROM table WHERE id = ${id-1}) AS prevSort FROM table WHERE id = ${id}` connection.query(sql, (err, results) => { if (err) throw err // 如果当前行不是第一行，则进行上移操作 if (results[0].prevSort) { const prevSort = results[0].prevSort const currSort = results[0].sort // 交换当前行和前一行的排序字段 const sql1 = `UPDATE table SET sort = ${prevSort} WHERE id = ${id}` const sql2 = `UPDATE table SET sort = ${currSort} WHERE id = ${id-1}` connection.query(sql1, (err, results) => { if (err) throw err connection.query(sql2, (err, results) => { if (err) throw err res.json({code: 0, message: '移动成功'}) }) }) } else { res.json({code: -1, message: '当前行已经是第一行，无法上移'}) } }) }) // 下移接口 app.post('/api/moveDown', (req, res) => { const id = req.body.id // 查询当前行和后一行的数据 const sql = `SELECT *, (SELECT sort FROM table WHERE id = ${id+1}) AS nextSort FROM table WHERE id = ${id}` connection.query(sql, (err, results) => { if (err) throw err // 如果当前行不是最后一行，则进行下移操作 if (results[0].nextSort) { const nextSort = results[0].nextSort const currSort = results[0].sort // 交换当前行和后一行的排序字段 const sql1 = `UPDATE table SET sort = ${nextSort} WHERE id = ${id}` const sql2 = `UPDATE table SET sort = ${currSort} WHERE id = ${id+1}` connection.query(sql1, (err, results) => { if (err) throw err connection.query(sql2, (err, results) => { if (err) throw err res.json({code: 0, message: '移动成功'}) }) }) } else { res.json({code: -1, message: '当前行已经是最后一行，无法下移'}) } }) }) ``` 以上是基本的实现思路，具体实现过程中需要根据实际业务进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值