效果展示

代码实现

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Bootstrap 实例 - 条纹表格</title><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><style type="text/css">.moveUpOrDown {background-color: #5BC0DE;border-radius: 3px;cursor: pointer;color: #FFFFFF;padding: 2px;font-size: 12px;}</style><script type="text/javascript">$(function () {/*** 为 上移 、下移 按钮绑定点击事件*/$("body").on("click", ".moveUpOrDown", function () {var text = $(this).text();if (text == "上移") {var prevTr = $(this).parent().parent().prevAll();/**如果当前行不是第一行，则上移它*/if (prevTr.length > 0) {var preTemp = prevTr.first();var thisHr = $(this).parent().parent();/**将上一行与本行交互内容，replaceWith 方法内容为 html 内容* 可参考文档：http://www.w3school.com.cn/jquery/manipulation_replacewith.asp*/thisHr.replaceWith("<tr>" + preTemp.html() + "</tr>");preTemp.replaceWith("<tr>" + thisHr.html() + "</tr>");}} else if (text == "下移") {var nextTr = $(this).parent().parent().next();if (nextTr.length > 0) {var thisHr = $(this).parent().parent();/**将本行与下一行交互内容，replaceWith 方法内容为 html 内容 */thisHr.replaceWith("<tr>" + nextTr.html() + "</tr>");nextTr.replaceWith("<tr>" + thisHr.html() + "</tr>");}}});});</script></head>
<body><table class="table table-striped"><caption>条纹表格布局</caption><thead><tr><th>名称</th><th>城市</th><th>邮编</th><th>排序</th></tr></thead><tbody><tr><td>Tanmay1</td><td>Bangalore</td><td>560001</td><td><span class="moveUpOrDown">上移</span> | <span class="moveUpOrDown">下移</span></td></tr><tr><td>Sachin1</td><td>Mumbai</td><td>400003</td><td><span class="moveUpOrDown">上移</span> | <span class="moveUpOrDown">下移</span></td></tr><tr><td>Uma1</td><td>Pune</td><td>411027</td><td><span class="moveUpOrDown">上移</span> | <span class="moveUpOrDown">下移</span></td></tr><tr><td>Tanmay2</td><td>Bangalore</td><td>560001</td><td><span class="moveUpOrDown">上移</span> | <span class="moveUpOrDown">下移</span></td></tr><tr><td>Sachin2</td><td>Mumbai</td><td>400003</td><td><span class="moveUpOrDown">上移</span> | <span class="moveUpOrDown">下移</span></td></tr><tr><td>Uma2</td><td>Pune</td><td>411027</td><td><span class="moveUpOrDown">上移</span> | <span class="moveUpOrDown">下移</span></td></tr><tr><td>Tanmay3</td><td>Bangalore</td><td>560001</td><td><span class="moveUpOrDown">上移</span> | <span class="moveUpOrDown">下移</span></td></tr><tr><td>Sachin3</td><td>Mumbai</td><td>400003</td><td><span class="moveUpOrDown">上移</span> | <span class="moveUpOrDown">下移</span></td></tr><tr><td>Uma3</td><td>Pune</td><td>411027</td><td><span class="moveUpOrDown">上移</span> | <span class="moveUpOrDown">下移</span></td></tr></tbody>
</table></body>
</html>

JQuery 实现表格数据行上移与下移效果相关推荐

前端js实现表格数据的上移下移
vue项目需求中需要前端实现表格行数据的上移下移,效果如下实现思路:主要使用前端对数组的操作方法splice() 代码: tableData: [{name: '1',id: '1'}, {name ...
elementUI 表格多行上移下移、单行移动、拖拽移动（行，列）
多行上移下移主要代码实现效果,勾选多行整体上移或者下移 //移动后更新排序moveUpdateSort(tableList){for(let i in tableList){//tableList ...
更改excel表格行数太多_excel表格数据行数太多-EXCEL显示太多行数据，导致文件过大，如何解决！...
EXCEL显示太多行数据,导致文件过大,如何解决! 可以设置打印区 1.电脑打Excel表格. 2.打开Excel表格后,选中要打印的区后点入页面布局. 3.点击进入页面布局后,点击打印区域中的设置打 ...
vue项目 element表格数据行转列数据互转
后台返回的格式一个人名里面带有这个人的所有信息,我们需要数据转化 ( 俗称行转列 ) 这个平时可以用在时间日期上比较多,这个案例只是把这个写法记录下来 <template><div ...
jQuery实现表格数据无限滚动
先来看下效果: 滚动 <div class="tbody-box"><div class="tbody"><div id=&quo ...
js如何实现数组数据的上移下移
Vue项目开发中碰到对表格数据实现上移,下移的需求,只是纯前端实现移动数组数据,不跟服务端做交互. 经研究,用splice方法简洁优雅,具体实现如下: // 上移,下移onMove(code, dir ...
（前端开发）表格中的行全选、全不选、反选以及数据行背景色变换的示例代码
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
jQuery 实现表格与 ckeckbox 的全选、单选功能
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 功能点 1. 用户点击头的checkbox时,所有表格数据行的checkbox全选或反选. 当数据 ...
JAVA如何选中一行上移,怎么把表格一行整体上移
1. Word表格怎样整体往上移一行如果你的表格很规则,可以选中下面的内容,整体将它们用鼠标向上拖放即可. 也可以将上面一行内容剪切后将下面的内容向上拖放,然后把第一行的内容粘贴到最后一行. 如果表 ...
java读取csv文件的行数_JMeter 读取 CSV 文件数据行数
在用 JMeter 做测试时,经常需要调用外部 CSV 文件的数据到脚本中使用,如果我们想对 CSV 文件中数据的行数进行统计,这个怎么做呢? 针对上面表格的数据,我们一起来学习一下如何统计数据行数吧 ...

JQuery 实现表格数据行上移与下移效果

效果展示

代码实现

JQuery 实现表格数据行上移与下移效果相关推荐

最新文章

热门文章