JAVA如何选中一行上移_js操作table中tr的顺序实现上移下移一行的效果
总体思路是在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 = "
newHtml += ("
" + tab.rows[0].innerHTML + "");
for (i = 1; i < tab.rows.length; i++) {
if (i == (nowNowIndex - 1)) {
newHtml += ("
" + nowNodeInnerHtml + "");
}
newHtml += ("
" + tab.rows[i].innerHTML + "");
}
newHtml += "
";
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 = "
newHtml += ("
" + tab.rows[0].innerHTML + "");
for (i = 1; i < tab.rows.length; i++) {
if (i == (nowNowIndex + 1)) {
newHtml += ("
" + nowNodeInnerHtml + "");
}
newHtml += ("
" + tab.rows[i].innerHTML + "");
}
//向下可能到表格现有行数外 额外处理
if (tab.rows.length == (nowNowIndex + 1)) {
newHtml += ("
" + nowNodeInnerHtml + "");
}
newHtml += "
";
document.getElementById("divContent").innerHTML = newHtml;
}
}
测试html代码如下
工号 | 姓名 |
0001 | 姓名01 |
0002 | 姓名02 |
0003 | 姓名03 |
0004 | 姓名04 |
0005 | 姓名05 |
总结
以上所述是小编给大家介绍的js操作table中tr的顺序实现上移下移一行的效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
JAVA如何选中一行上移_js操作table中tr的顺序实现上移下移一行的效果相关推荐
- js操作table中tr的顺序,实现上移下移一行的效果
总体思路是在table外部加个div,修改div的innerHtml实现改变tr顺序的效果 具体思路是 获取当前要移动tr行的rowIndex,在table中删除掉,然后循环table的rows,到了 ...
- html表格整体左移动,js操作table统制tr jquery 两个table左右移动
js操作table控制tr jquery 两个table左右移动 一.关于动态操作select的问题: ------------------------------------------------ ...
- table中tr使用toggle不好,选择换一张方式
好几次遇到的问题,都是table中tr后面有一部分内容要显示,也是用tr装的,但是需要点击该行,后面那个tr才显示出来.不过最好不要用toggle去写,因为着实效果不佳.故而建议换一种方式,也许最简单 ...
- Jquery和JS获取Table中tr标签的值以及赋值问题
Jquery和JS获取Table中tr标签的值以及赋值 业务场景:根据 类型,给比例赋值,是当前td比例动态变化:废话少说,直接上代码 1.以下是HTML代码; <div class=" ...
- 淘宝里table中tr之间有空隙的解决方法
最近在公司遇到了淘宝里table <tr>之间有空隙的问题,直接正题不罗嗦: 方法一:在table中所有图片都加入"align="top"" 举例: ...
- 用js操作table、tr、td 「字体样式及TD背景图片」
function messageSort() { --函数名 var message=document.getElementById("message").value; --添加 ...
- java函数ao活动对象_JS之预编译和执行顺序(全局和函数)
预编译的两种情况 全局: 1.全局 直接是script标签中的代码,不包括函数执行 执行前: 1.首先生成一个GO(global object)对象,看不到,但是可以模拟出来用来分析 2.分析变量声明 ...
- js控制table中tr位置互换
<!-- 测试 --> <script type="text/javascript"> function doit(f, t) { $ ...
- TABLE中TR、TH和TD
1.tr标示这个表格中间的一个行 2.td标示行中的一个列,需要嵌套在<tr</tr中间 3.th 定义表头单元格.表格中的文字将以粗体显示 下面的代码可以实现,table有内外边框,同时 ...
- html删除table中tr
<table><tr><td><a href="javascript:;" οnclick="delRow(this)" ...
最新文章
- 我的2019春招(前端暑期实习)记录
- 获取当前脚本所在的绝对路径
- .NET中的异步编程(四)- IO完成端口以及FileStream.BeginRead
- linux生成数字命令,Linux下随机生成密码的命令
- 1025 反转链表 (25 分)(c语言)
- VS2010 MFC多文档中的工具栏CMFCToolBar停靠的问题
- mysql选择联合索引还是单索引?索引列应该使用哪一个最有效?深入測试探讨...
- KMP算法(C语言版)
- php扩展 ioncube组件的安装方法_安装IonCube Loader扩展方法
- PDF文件拆分为图片
- 自然语言处理 cs224n 2019 Lecture 11: ConvNets for NLP
- 倒排索引c语言,Inverted Index(倒排索引)
- 宏的录制以及在Visual Basic中显示代码
- 中国大数据综合服务提供商Top100排行榜
- 《LCD总结篇(中级)》
- 华科计算机保研复试题目,2010华科保研复试经验谈
- NSGA-II算法阅读笔记
- Android中的ShareSDK学习
- Oracle使用脚本导出数据(spool)
- 【Scratch课件-变量】小熊出游
热门文章
- 如何做web程序权限管理
- 嵌入式基础面八股文——并发,同步,异步,互斥,阻塞,非阻塞的理解(2)
- [Python3] 017 字典的内置方法
- 20172315 2017-2018-2 《程序设计与数据结构》实验三报告
- 里氏替换原则(Liskov Substitution Principle)
- iOS学习之Object-C语言继承和初始化方法
- swift项目第七天:构建访客界面以及监听按钮点击
- 坐标下降法和交替最小二乘法的区别是什么?
- 豆瓣评分9.2,GitHub 3.3k的学霸笔记终于出书了!获得李宏毅等大佬好评 -- 文末送书...
- 【博士后招聘】浙江大学杨杰课题组-医学AI/大数据分析/自然语言处理