JS控制HTML表格行上下移动
[b]补充一下:[/b]重新调整了CSS和JS的浏览器兼容,希望大家多多指教,ThankYou!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>Table test</title>
<style type="text/css">
table {
width: 300px;
border: 1px solid black;
}
.table2 {
width: 300px;
border: 0px;
}
td {
border: 1px solid black;
text-align: center;
font-size: 12pt;
padding: 3px;
}
.td2 {
border: 0px;
}
.alt {
background: #BEC5BE;
}
</style>
<script language="JavaScript" type="text/javascript">
window.onload = function() {
var _table = document.getElementById("table1");
cleanWhitespace(_table);
}
cleanWhitespace = function(element_obj) {
//遍历element的子结点
for (var i = 0; i < element_obj.childNodes.length; i++) {
var node = element_obj.childNodes[i];
//判断是否是空白文本结点,如果是,则删除该结点
if (node.nodeType == 3 && !/\S/.test(node.nodeValue))
node.parentNode.removeChild(node);
}
}
//使表格行上移,接收参数为链接对象
moveUp = function() {
//获得表格对象
var _table = document.getElementById("table1");
var _row = "";
for (var i = 0; i < _table.rows.length; i++) {
if (_table.rows[i].className == "alt")
_row = _table.rows[i];
}
//如果不是第一行,则与上一行交换顺序
if (_row.previousSibling) {
var last_row = _row.previousSibling;
while (last_row.nodeType != 1) {
last_row = last_row.previousSibling;
}
swapNode(_row,last_row);
}
}
//使表格行下移,接收参数为链接对象
moveDown = function() {
//获得表格对象
var _table = document.getElementById("table1");
var _row = "";
for (var i = 0; i < _table.rows.length; i++) {
if (_table.rows[i].className == "alt")
_row = _table.rows[i];
}
//如果不是最后一行,则与下一行交换顺序
if (_row.nextSibling) {
var next_row = _row.nextSibling;
while (next_row.nodeType != 1) {
next_row = next_row.nextSibling;
}
swapNode(_row,next_row);
}
}
//定义通用的函数交换两个结点的位置
swapNode = function(node1,node2) {
//获取父结点
var _parent = node1.parentNode;
//获取两个结点的相对位置
var _t1 = node1.nextSibling;
var _t2 = node2.nextSibling;
//将node2插入到原来node1的位置
if (_t1) _parent.insertBefore(node2,_t1);
else _parent.appendChild(node2);
//将node1插入到原来node2的位置
if (_t2) _parent.insertBefore(node1,_t2);
else _parent.appendChild(node1);
}
work_over = function(obj) {
obj.style.backgroundColor='#BEC5BE';
}
work_out = function(obj) {
obj.style.backgroundColor='';
}
work_click = function(obj) {
//获得表格对象
var t_obj = document.getElementById("table1");
//遍历所有表格对象的行
for (var i = 0; i < t_obj.rows.length; i++) {
//将行的样式清空
t_obj.rows[i].className = "";
}
obj.className = "alt";
}
work_updateSort = function() {
//获得表格对象
var t_obj = document.getElementById("table1");
//获得表格对象数组
var row_length = t_obj.rows.length;
var s_num = new Array(row_length);
//遍历所有表格对象的行
for (var i = 0; i < row_length; i++) {
s_num[i] = t_obj.rows[i].id;
}
}
</script>
</head>
<body>
<table id="table1">
<tr id="1" οnclick="work_click(this);" οnmοuseοver="work_over(this);" οnmοuseοut="work_out(this);">
<td width="25%">1</td>
<td width="25%">11</td>
<td width="25%">栏目</td>
<td width="25%">栏目</td>
</tr>
<tr id="2" οnclick="work_click(this);" οnmοuseοver="work_over(this);" οnmοuseοut="work_out(this);">
<td>2</td>
<td>22</td>
<td>栏目</td>
<td>栏目</td>
</tr>
<tr id="3" οnclick="work_click(this);" οnmοuseοver="work_over(this);" οnmοuseοut="work_out(this);">
<td>3</td>
<td>33</td>
<td>栏目</td>
<td>栏目</td>
</tr>
<tr id="4" οnclick="work_click(this);" οnmοuseοver="work_over(this);" οnmοuseοut="work_out(this);">
<td>4</td>
<td>44</td>
<td>栏目</td>
<td>栏目</td>
</tr>
<tr id="5" οnclick="work_click(this);" οnmοuseοver="work_over(this);" οnmοuseοut="work_out(this);">
<td>5</td>
<td>55</td>
<td>栏目</td>
<td>栏目</td>
</tr>
</table>
<form id="changeform" name="changeform" method="post">
<table id="table2" class = "table2">
<tr>
<td class = "td2">
<input name="button" type="button" class="" οnclick="moveUp();" value="上移"/>
<input name="button" type="button" class="" οnclick="moveDown();" value="下移"/>
<input name="Submit" type="button" class="" onClick="work_updateSort();" value="保存修改"/>
</td>
</tr>
</table>
</form>
</body>
</html>
JS控制HTML表格行上下移动相关推荐
- html表格鼠标高亮行列,JS实现的表格行鼠标点击高亮效果代码
本文实例讲述了JS实现的表格行鼠标点击高亮效果代码.分享给大家供大家参考,具体如下: 偶尔在看天天基金网净值公告时,从源代码里剥下的一段js代码,感觉比较实用,分享一下(仅IE有效) var high ...
- JS控制 textarea多行文本框HTML标签根据内容自适应高度
<script> // 页面加载调用ableMutibleTextArea();function ableMutibleTextArea(){$('textarea').each(func ...
- 《JS控制表格奇偶数行背景色变换》
引言: 当我们利用html标记标签语言制作出一张普通的信息表格时,为了摆脱单调,提高用户体验,我们可以为其添加各种动态效果,以满足用户在操作表格时所带来的效果乐趣. 内容概括:当鼠标移动到表格上的相关 ...
- AppBoxPro - 细粒度通用权限管理框架(可控制表格行内按钮)源码提供下载
2019独角兽企业重金招聘Python工程师标准>>> 特别声明: 提供的源代码已经包含了 AppBoxPro 的全部源代码,用 VS2012 打开项目后,直接 Ctrl+F5 可以 ...
- 动态增删表格行(纯JS写法)
动态增删表格行(纯JS写法) 归档 进行表格下行的动态增加与删除 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional// ...
- html指定表格行列书,js动态生成指定行数的表格
下面用js实现可以生成用户所需行数的表格. 1.首先在body中填入下列代码,获取用户填入的行数值 动态生成表格 行 效果如下图所示: 2.header中添加js代码 function table() ...
- JS组件系列——Bootstrap Table 表格行拖拽(二:多行拖拽)
原文:JS组件系列--Bootstrap Table 表格行拖拽(二:多行拖拽) 前言:前天刚写了篇JS组件系列--Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的 ...
- JS组件系列——Bootstrap Table 表格行拖拽
JS组件系列--Bootstrap Table 表格行拖拽 原文:JS组件系列--Bootstrap Table 表格行拖拽 前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一 ...
- JS实现鼠标点击展开/隐藏表格行
<title>JS实现鼠标点击展开/隐藏表格行_网页代码站(www.webdm.cn)</title> <script language="javascript ...
最新文章
- Java 8默认方法会破坏你的(用户的)代码
- (uC/OS-II学习笔记)关于共享资源与信号量
- 使用gnucash查看任意时间段内的所有者权益变动表
- AI理论知识整理(13)-标准基
- 详细解析Linux /etc/passwd文件
- AI研究公司面试准备指南
- oracle左连接查询代码,ORACLE连接查询,内外连接
- 转:SQL:外连接on条件与where条件的区别
- Laravel5.2之模型关联预加载
- 【分享】如何长时间高效学习
- coreos 搭建PHP,Linux_用Mac在CoreOS上搭建WordPress的教程,作者以自己的Mac笔记本为例, - phpStudy...
- 移动应用市场统计分析
- 操作系统——I/O设备
- 关于php开发中用户请求数据的安全问题的一点想法
- android 5播放flash插件下载地址,Flash Player安卓版
- jsmy97时间控件,时间范围选择
- sof与NIOS II的elf固件合并生成jic文件
- 专有名词collect
- Steven Lin 林嘉澍
- 假如生产环境出现CPU占用过高,如何排查与定位