如何用js实现 ;两个个表格拖拽复制的问题 就是鼠标拖住一个表格的一行到另一个表格 可以直接实现复制?
解决方案 »
- Jquery 如何根据相同的元素进行排序
- 获取页面标题的代码,火狐下不能通过,求助!
- 网页嵌入视频播放结束后自动跳转
- 网易的邮件系统,上传附件,一次可以选择多个文件上传,这是怎么实现的呢;有思路吗?
- ajax请求html的怪现象不知道大家遇到过没有
- javascript调用xml的问题,急!在线等
- 有没有可以在网页上拖动一个层,并随着拖动层页面自动伸展(有的拖到页面外面就找不到了,也就是没有出现滚动条)的例子.
- 请问?
- 怎样判断一个对象是不是存在呢?
- net_lover(孟子E章) weidegong(weidegong) qiushuiwuhen(秋水无恨) 进来拿分!!谢谢!!
- 求一段判断IP的正则表达式
- 多行select鼠標移動怎麼做到和單行select一樣的反白效果?
分大牛你懂得
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload = function(){
var c = null,curr=null;
var tbs = document.getElementsByTagName('table');
function e(a,f){
for(var i=0,j=a.length;i<j;i++){
f.call(a[i],i);
}
}
e(tbs,function(n){
this.index = n;
this.onmousedown = function(e,t,arr){
e = e||event;
t = e.srcElement||e.target;
arr = [];
if(t.tagName.toLowerCase()==='td'){
curr = n;
c = document.createElement('tr');
var tds = t.parentNode.getElementsByTagName('td')
for(var j=0,k=tds.length;j<k;j++){
arr.push('<td>' + tds[j].innerHTML + '</td>')
}
}
document.onmouseup = function(e,t){
e = e||event;
t = e.srcElement||e.target;
if(t.tagName.toLowerCase()==='td'){
if(t.parentNode.parentNode.parentNode.index!=curr){
t.parentNode.parentNode.insertBefore(c,t.parentNode);
}
}
c.innerHTML = arr.join('');
c = null,curr = null,document.onmouseup = null;
}
}
})
}
</script>
</head><body>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>252525</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>25254</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>25254254</td>
<td> </td>
<td> </td>
</tr>
</table>
<table width="100%" border="1" cellspacing="0" cellpadding="0" style="margin-top:50px;">
<tr>
<td>fdsfd</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>fdfds</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>fdsf</td>
<td> </td>
<td> </td>
</tr>
</table>
<p> </p>
</body>
</html>
用FireBug调试的,就忘记看IE了
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload = function(){
var c = null,curr=null;
var tbs = document.getElementsByTagName('table');//获取所有表格
function e(a,f){
for(var i=0,j=a.length;i<j;i++){
f.call(a[i],i);
}
}
e(tbs,function(n){//开始给每个table添加onmousedown函数
this.index = n;
this.onmousedown = function(e,t,arr){
//鼠标在table按下的时候存储当前点击的行,并添加document的onmouseup事件
e = e||event;
t = e.srcElement||e.target;
arr = [];
if(t.tagName.toLowerCase()==='td'){
curr = n;
var tds = t.parentNode.getElementsByTagName('td')
for(var j=0,k=tds.length,td=null;j<k;j++){
td = document.createElement('td');
td.innerHTML = tds[j].innerHTML;
arr.push(td);
}
}
document.onmouseup = function(e,t){//鼠标抬起的时候判断是否是在table上抬起的,如果是,就在抬起行的前面插入复制的行
e = e||event;
t = e.srcElement||e.target;
c = document.createElement('tr');
for(var j=0,k=arr.length;j<k;j++){
c.appendChild(arr[j]);
}
if(t.tagName.toLowerCase()==='td'){
if(t.parentNode.parentNode.parentNode.index!=curr){
t.parentNode.parentNode.insertBefore(c,t.parentNode);
}
}
c = null,curr = null,document.onmouseup = null;//清除所有临时变量,以备下次使用
}
}
})
}
</script>
</head><body>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>252525</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>25254</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>25254254</td>
<td> </td>
<td> </td>
</tr>
</table>
<table width="100%" border="1" cellspacing="0" cellpadding="0" style="margin-top:50px;">
<tr>
<td>fdsfd</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>fdfds</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>fdsf</td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
之前用innerHTMl实现的,后来发现IE的table里面 innerHTMl有bug所以用appendChild实现了,效率慢了好多。。杯具了。。