通过鼠标拖动改变二个表格格宽度 这个问题有一个月了,有谁知道怎么弄? 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 很长时间了,还有人知道吗? 网上看到有个通过鼠标拖动改变单元格宽度:代码:<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> JS Charts一个中文显示问题急!! jquery问题,麻烦帮帮忙 Jquery append后删除元素的问题 有谁在用 windows ME ? 问大家一个有关表格的问题! 紧急求救 客户端javascript怎么连服务器端的数据库? 怎样把网页上的表格内容导入到excel中,表格title有两层甚至三层,有例子请参考 to: net_lover(孟子E章),有沒有iframe做編輯器的toolbar.gif......... 你们喜欢哪种 这句话中为什么打出111111111呢 js中验证密码不允许有连续三位重复的正则表达式,看不明白,请大神分析,万分感谢。
代码:
<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>