javascript拖动表格行实现代码_javascript技巧
来源:动视网
责编:小采
时间:2020-11-27 20:59:07
javascript拖动表格行实现代码_javascript技巧
javascript拖动表格行实现代码_javascript技巧:代码 代码如下: 无标题页 移动 数据 数据 数据 * 11111111111 sdgergserhserhserh awegaw * 222222222 serherwwwwww fafafff * 333333333 qqqqqqqwewer yukyuk var curTr = null; var t
导读javascript拖动表格行实现代码_javascript技巧:代码 代码如下: 无标题页 移动 数据 数据 数据 * 11111111111 sdgergserhserhserh awegaw * 222222222 serherwwwwww fafafff * 333333333 qqqqqqqwewer yukyuk var curTr = null; var t

代码
代码如下:
无标题页
移动 |
数据 |
数据 |
数据 |
* |
11111111111 |
sdgergserhserhserh |
awegaw |
* |
222222222 |
serherwwwwww |
fafafff |
* |
333333333 |
qqqqqqqwewer |
yukyuk |
var curTr = null;
var tb1 = document.getElementById('tb1');
var trs = tb1.getElementsByTagName('tr');
tb1.onselectstart = function(){
if(curTr){
document.selection.empty(); return true;
}
};
for(var i=1; i
var tds = trs[i].getElementsByTagName('td');
tds[0].style.cursor = 'move';
tds[0].onmousedown = function(){
curTr = this.parentNode;
curTr.style.backgroundColor = '#eff';
};
tds[0].onmouseover = function() {
if(curTr && curTr != this.parentNode) {
this.parentNode.swapNode(curTr);
}
}
}
document.body.onmouseup = function(){
if(curTr){
curTr.style.backgroundColor = '';
curTr = null;
}
};
script>
注:不兼容firefox,在IE和chrome下测试通过哦。
javascript拖动表格行实现代码_javascript技巧
javascript拖动表格行实现代码_javascript技巧:代码 代码如下: 无标题页 移动 数据 数据 数据 * 11111111111 sdgergserhserhserh awegaw * 222222222 serherwwwwww fafafff * 333333333 qqqqqqqwewer yukyuk var curTr = null; var t