通过鼠标拖动改变二个表格格宽度

a2048 2014-04-10 04:32:04
网上看到有个通过鼠标拖动改变单元格宽度：
代码：
<html>
<head>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<meta name="keywords" content="站长,网页特效,网页特效代码,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<title>网页特效 鼠标拖动改变单元格宽度 站长特效网欢迎您。</title>
<style type="text/css">
<!--
* {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
}
-->
</style>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>
<div> 表1 <br>
<table id="dataTable" border="1" cellpadding="0" cellspacing="0" style="table-layout:fixed;border-collapse:collapse;">
<colgroup>
<col style="width:200px;" />
<col style="width:100px;" />
<col style="width:100px;" />
<col style="width:100px;" />
<col style="width:100px;" />
</colgroup>
<tr>
<td>站长一号</td>
<td>站长二号</td>
<td>站长三号</td>
<td>站长四号</td>
<td>站长五号</td>
</tr>
<tr>
<td>a</td>
<td> b</td>
<td> c</td>
<td>d </td>
<td>e </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

表2<br>
<table id="dataTable" border="1" cellpadding="0" cellspacing="0" style="table-layout:fixed;border-collapse:collapse;">
<colgroup>
<col style="width:200px;" />
<col style="width:100px;" />
<col style="width:100px;" />
<col style="width:100px;" />
<col style="width:100px;" />
</colgroup>
<tr>
<td>站长一号</td>
<td>站长二号</td>
<td>站长三号</td>
<td>站长四号</td>
<td>站长五号</td>
</tr>
<tr>
<td>a</td>
<td> b</td>
<td> c</td>
<td>d </td>
<td>e </td>
</tr>
</table>
</div><script language="javascript" type="text/javascript">
var JPos = {};
(function($){
$.getAbsPos = function(pTarget){
var x_ = y_ = 0;
if(pTarget.style.position != "absolute"){
while(pTarget.offsetParent){
x_ += pTarget.offsetLeft;
y_ += pTarget.offsetTop;
pTarget = pTarget.offsetParent;
}
}
x_ += pTarget.offsetLeft;
y_ += pTarget.offsetTop;
return {x:x_,y:y_};
}
$.getEventPos = function(evt){
var _x,_y;
evt = JEvent.getEvent(evt);
if(evt.pageX || evt.pageY){
_x = evt.pageX;
_y = evt.pageY;
}else if(evt.clientX || evt.clientY){
_x = evt.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft) - (document.body.clientLeft || document.documentElement.clientLeft);
_y = evt.clientY + (document.body.scrollTop || document.documentElement.scrollTop) - (document.body.clientTop || document.documentElement.clientTop);
}else{
return $.getAbsPos(evt.target);
}
return {x:_x,y:_y};
}
})(JPos);
//=======================================================================================
var JEvent = {};
(function($){
$.getEvent = function(evt){
evt = window.event || evt;
if(!evt){
var fun = JEvent.getEvent.caller;
while(fun != null){
evt = fun.arguments[0];
if(evt && evt.constructor == Event)
break;
fun = fun.caller;
}
}
return evt;
}
$.doEvent = function(fun){
var args = arguments;
return function(){
return fun(args);
}
}
})(JEvent);
//=======================================================================================
var colIndex;
var dataTable = document.getElementById("dataTable");
var cols = dataTable.getElementsByTagName("COL");
var dragMask = document.createElement("DIV");
var mAWidth = mAHeight = 300;
document.body.insertBefore(dragMask,document.body.lastChild);
dragMask.style.cssText = "width:" + mAWidth + "px;height:" + mAHeight + "px;position:absolute;background-color:#000;filter: Alpha(Opacity=10);-moz-opacity:0.1;opacity: 0.1;display:none;z-index:999999999;display:none;";
var mask_mousemove = function(evt){
if(document.selection){//IE ,Opera
if(document.selection.empty)
document.selection.empty();//IE
else{//Opera
document.selection = null;
}
}else if(window.getSelection){//FF,Safari
window.getSelection().removeAllRanges();
}
var oPos = JPos.getAbsPos(this);
var mPos = JPos.getEventPos(evt);
var x = mPos.x - oPos.x - mAWidth / 2;
var tmpX = parseInt(cols[colIndex].style.width) + x;
dragMask.style.left = mPos.x - mAWidth / 2 + "px";
cols[colIndex].style.width = tmpX >= 2 ? tmpX + "px" : "2px";
if(!document.all)
dataTable.parentNode.style.width = dataTable.parentNode.clientWidth + x + "px";//这一句为处理FF时用。
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
var mask_mouseup = function(evt){
dragMask.style.display = "none";
}
dragMask.onmousemove = mask_mousemove;
dragMask.onmouseup = mask_mouseup;
var cell_mousedown = function(evt){
colIndex = this.colIndex;
var mPos = JPos.getEventPos(evt);
with(dragMask.style){
left = mPos.x - mAWidth / 2 + "px";
top = mPos.y - mAHeight / 2 + "px";
display = "";
}
}
var chk_click = function(evt){
var obj = cols[this.colIndex];
if(this.checked){
obj.style.cssText = obj.css_ ? obj.css_ : "width:100px;";
}else{
obj.css_ = obj.style.cssText;
obj.style.cssText = document.all ? "display:none" : "visibility: collapse;overflow:hidden;width:0px;";
}
}
var i , o;
var label ,chk;
for(i = 0 ; o = dataTable.rows[0].cells[i] ; i++){
o.colIndex = i;
o.onmousedown = cell_mousedown;
label = document.createElement("LABEL");
document.body.insertBefore(label,document.body.lastChild);
chk = document.createElement("INPUT");
}
</script>
</body>
</html>

上面我已经加了一个表格，现在怎么通过鼠标拖动二个表格的列宽。当前是可以拖动表1里面的列宽，怎么可以拖动表2里面的列宽？
...全文
211 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
猿敲月下码 2014-05-27
  • 打赏
  • 举报
 回复 
网上看到有个通过鼠标拖动改变单元格宽度：
代码：
<html>
<head>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<meta name="keywords" content="站长,网页特效,网页特效代码,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<title>网页特效 鼠标拖动改变单元格宽度 站长特效网欢迎您。</title>
<style type="text/css">
<!--
* {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #333333;
}
-->
</style>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>
<div> 表1 <br>
  <table id="dataTable" border="1" cellpadding="0" cellspacing="0" style="table-layout:fixed;border-collapse:collapse;">
  <colgroup>
    <col style="width:200px;" />
    <col style="width:100px;" />
    <col style="width:100px;" />
    <col style="width:100px;" />
    <col style="width:100px;" />
    </colgroup>
  <tr>
    <td>站长一号</td>
    <td>站长二号</td>
    <td>站长三号</td>
    <td>站长四号</td>
    <td>站长五号</td>
   </tr>
  <tr>
    <td>a</td>
    <td> b</td>
    <td> c</td>
    <td>d </td>
    <td>e </td>
   </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
   </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
   </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
   </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
   </tr>
  </table>
  
表2<br>
  <table id="dataTable2" border="1" cellpadding="0" cellspacing="0" style="table-layout:fixed;border-collapse:collapse;">
    <colgroup>
      <col style="width:200px;" />
      <col style="width:100px;" />
      <col style="width:100px;" />
      <col style="width:100px;" />
      <col style="width:100px;" />
    </colgroup>
    <tr>
      <td>站长一号</td>
    <td>站长二号</td>
    <td>站长三号</td>
    <td>站长四号</td>
    <td>站长五号</td>
   </tr>
  <tr>
    <td>a</td>
    <td> b</td>
    <td> c</td>
    <td>d </td>
    <td>e </td>
   </tr>
  </table>
</div><script language="javascript" type="text/javascript">
var JPos = {};
(function($){
 $.getAbsPos = function(pTarget){
  var x_ = y_ = 0;
  if(pTarget.style.position != "absolute"){
   while(pTarget.offsetParent){
     x_ += pTarget.offsetLeft;
     y_ += pTarget.offsetTop;
     pTarget = pTarget.offsetParent;
   }
  }
   x_ += pTarget.offsetLeft;
   y_ += pTarget.offsetTop;
  return {x:x_,y:y_};
 }
 $.getEventPos = function(evt){
   var _x,_y;
   evt = JEvent.getEvent(evt);
   if(evt.pageX || evt.pageY){
    _x = evt.pageX;
    _y = evt.pageY;
   }else if(evt.clientX || evt.clientY){
    _x = evt.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft) - (document.body.clientLeft || document.documentElement.clientLeft);
    _y = evt.clientY + (document.body.scrollTop || document.documentElement.scrollTop) - (document.body.clientTop || document.documentElement.clientTop);
   }else{
    return $.getAbsPos(evt.target);
   }
   return {x:_x,y:_y};
 }
})(JPos);
//=======================================================================================
var JEvent = {};
(function($){
 $.getEvent = function(evt){
  evt = window.event || evt;
  if(!evt){
   var fun = JEvent.getEvent.caller;
   while(fun != null){
    evt = fun.arguments[0];
    if(evt && evt.constructor == Event)
     break;
    fun = fun.caller;
   }
  }
  return evt;
 }
 $.doEvent = function(fun){
  var args = arguments;
  return function(){
   return fun(args);
  }
 }
})(JEvent);
//=======================================================================================

function initTable(tableId){
var colIndex;
var dataTable = document.getElementById(tableId);
var cols = dataTable.getElementsByTagName("COL");
var dragMask = document.createElement("DIV");
var mAWidth = mAHeight = 300;
document.body.insertBefore(dragMask,document.body.lastChild);
dragMask.style.cssText = "width:" + mAWidth + "px;height:" + mAHeight + "px;position:absolute;background-color:#000;filter: Alpha(Opacity=10);-moz-opacity:0.1;opacity: 0.1;display:none;z-index:999999999;display:none;";
var mask_mousemove = function(evt){
 if(document.selection){//IE ,Opera
  if(document.selection.empty)
   document.selection.empty();//IE
  else{//Opera
   document.selection = null;
  }
 }else if(window.getSelection){//FF,Safari
  window.getSelection().removeAllRanges();
 }
 var oPos = JPos.getAbsPos(this);
 var mPos = JPos.getEventPos(evt);
 var x = mPos.x - oPos.x - mAWidth / 2;
 var tmpX = parseInt(cols[colIndex].style.width) + x;
 dragMask.style.left = mPos.x - mAWidth / 2 + "px";
 cols[colIndex].style.width = tmpX >= 2 ? tmpX + "px" : "2px";
 if(!document.all)
  dataTable.parentNode.style.width = dataTable.parentNode.clientWidth + x + "px";//这一句为处理FF时用。
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
var mask_mouseup = function(evt){
 dragMask.style.display = "none";
}
dragMask.onmousemove = mask_mousemove;
dragMask.onmouseup = mask_mouseup;
var cell_mousedown = function(evt){
 colIndex = this.colIndex;
 var mPos = JPos.getEventPos(evt);
 with(dragMask.style){
  left = mPos.x - mAWidth / 2  + "px";
  top = mPos.y - mAHeight / 2 + "px";
  display = "";
 }
}
var chk_click = function(evt){
 var obj = cols[this.colIndex];
 if(this.checked){
  obj.style.cssText = obj.css_ ? obj.css_ : "width:100px;";
 }else{
  obj.css_ = obj.style.cssText;
  obj.style.cssText = document.all ? "display:none" : "visibility: collapse;overflow:hidden;width:0px;";
 }
}
var i , o;
var label ,chk;
for(i = 0 ; o = dataTable.rows[0].cells[i] ; i++){
 o.colIndex = i;
 o.onmousedown = cell_mousedown;
 label = document.createElement("LABEL");
 document.body.insertBefore(label,document.body.lastChild);
 chk = document.createElement("INPUT");
}
}


initTable('dataTable')
initTable('dataTable2')
</script>
</body>
</html>
a2048 2014-05-26
  • 打赏
  • 举报
 回复
很长时间了，还有人知道吗？
前端20187 2014-05-08
  • 打赏
  • 举报
 回复
extjs有这个功能
a2048 2014-05-07
  • 打赏
  • 举报
 回复
这个问题有一个月了，有谁知道怎么弄？
flash shiti
10. 某电影中，只有一个layer1，其上放置一个有两个元件（test1 和test2）组合成的组合体， 选择这个组合体执行打散Ctrl+B，然后右键单击执行Distribute to layers，那末： □ A. 这个电影中将增加两个新层：layer2 ...
8个老手都不一定知道的sketch技巧
这意味着，如果您需要将图层的大小翻一番，您可以简单地添加它*2到当前尺寸的末尾，此时属性...此外，当您在项目中调整微妙的细节时，当您只想进行小的更改时，单击并用鼠标拖动图层可能会产生破坏性影响，并且不准确。
flash复习2
如果一个对象是以100%的大小显示在工作区中，选择工具箱中的Zoom Tool工具，在其上单击一下，则对象将以多少的比例显示在工作区中. 　A．50% 　B．100% 　C．200% 　D．400% 　答案：C 　2. Break Apart命令...
第九讲 网页中的表格操作
在网页中插入表格可以使网页上的内容排列整齐，让浏览者对表格中表达的数据及其含义一目了然，更容易找到感...二是组织网页的内容，使网页更整洁美观。对于图文混排的网页，利用表格可以大大提高网页制作的效率。在隐
Excel操作
Excel操作1 基础操作1.1 快捷键1.2 宽度和高度的调整1.3 对齐1.4 样式1.5 日期1.6 修改1.7 公式计算1.8 数字2 表格设计3 自动加总函数4 冻结窗格&分割视窗5 资料排序6 筛选 1 基础操作 1.1 快捷键 快捷键 ...
JavaScript

87,907

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章