HTML表格行上下移动,JS控制HTML表格行上下移动

补充一下：重新调整了CSS和JS的浏览器兼容，希望大家多多指教，ThankYou！

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Table test

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;

}

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;

}

}

1	11	栏目	栏目
2	22	栏目	栏目
3	33	栏目	栏目
4	44	栏目	栏目
5	55	栏目	栏目