今天做了一个可以改变行列宽的表格，大家看看如何样
日期：2014-05-16 浏览次数：20486 次
今天做了一个可以改变行列宽的表格，大家看看怎么样？
代码看我的博客：
http://blog.csdn.net/bluedoctor/archive/2007/01/08/1477334.aspx
运行效果：
实际运行效果：
http://www.pwmis.cn/bbs/dispbbs.asp?boardID=5&replyID=1135&ID=721
------解决方案--------------------
不怎么好用，要鼠标点着不放才能拖
------解决方案--------------------
mouse的处理很不“和谐”
呵呵
------解决方案--------------------
直接在td区域就可以拖动大小，
这一点挺有创意的。
代码有较大的改进空间，
改进之后应该是一个很不错的东东。
------解决方案--------------------
测试完毕,的确不怎么好使,不过总体来说还不错,个人觉得还是以前论坛上有的几个拖动的例子比较好
------解决方案--------------------
代码稍作改进，已被JK收集：
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> JK:支持民族工业,尽量少买X货 </title>
<script language= "javascript ">
var currentResizeTdObj=null;
function MouseDownToResize(event,obj){
obj=obj||this;
event=event||window.event;
currentResizeTdObj=obj;
obj.mouseDownX=event.clientX;
obj.mouseDownY=event.clientY;
obj.tdW=obj.offsetWidth;
obj.tdH=obj.offsetHeight;
if(obj.setCapture) obj.setCapture();
else event.preventDefault();
}
function MouseMoveToResize(event){
if(!currentResizeTdObj) return ;
var obj=currentResizeTdObj;
event=event||window.event;
if(!obj.mouseDownX) return false;
if(obj.parentNode.rowIndex==0) {
var newWidth=obj.tdW*1+event.clientX*1-obj.mouseDownX;
if(newWidth> 0) obj.style.width = newWidth;
else obj.style.width =1;
}
if(obj.cellIndex==0){
var newHeight=obj.tdH*1+event.clientY*1-obj.mouseDownY;
if(newHeight> 0) obj.style.height = newHeight;
else obj.style.height =1;
}
}
function MouseUpToResize(){
if(!currentResizeTdObj) return;
if (currentResizeTdObj.releaseCapture) currentResizeTdObj.releaseCapture();
currentResizeTdObj=null;
}
//改变表格行列宽函数
function ResizeTable_Init(table,needChangeWidth,needChangeHeight)
{
if(!needChangeWidth && !needChangeHeight) return;
var oTh=table.rows[0];
if(needChangeWidth){
for(var i=0;i <oTh.cells.length;i++) {
var cell=oTh.cells[i];
cell.style.cursor= "e-resize ";
cell.style.width=cell.offsetWidth;
cell.onmousedown =MouseDownToResize;
}
}
if(needChangeHeight){
for(var j=0;j <table.rows.length;j++) {
var cell=table.rows[j].cells[0];
cell.style.cursor= "s-resize ";
cell.onmousedown =MouseDownToResize;
}
}
if(needChangeWidth && needChangeHeight) oTh.cells[0].style.cursor= "se-resize ";
table.style.width=null;
table.style.tableLayout= "fixed ";
}
//函数块定义结束
</script>
</head>
<body onmousemove= "MouseMoveToResize(event); " onmouseup= "MouseUpToResize(); " >
<div style= "font-size:10pt; ">
注1：改变Table的列宽 <br/>
注2：部分代码来自csdn网友bluedoctor:http://community.csdn.net/Expert/topic/5282/5282361.xml <br/>
<br/>
注：本页面仅在IE6/Firefox1.5下测试过(效果不一致)。其它浏览器或其它版本未经测试。 <br/>
注-----：JK： <a href= "mailTo:jk_10000@yahoo.com.cn?subject=About%20ChangeColumnWidth "> JK_10000@yahoo.com.cn </a> <br/>
代码看我的博客：
http://blog.csdn.net/bluedoctor/archive/2007/01/08/1477334.aspx
运行效果：
实际运行效果：
http://www.pwmis.cn/bbs/dispbbs.asp?boardID=5&replyID=1135&ID=721
------解决方案--------------------
不怎么好用，要鼠标点着不放才能拖
------解决方案--------------------
mouse的处理很不“和谐”
呵呵
------解决方案--------------------
直接在td区域就可以拖动大小，
这一点挺有创意的。
代码有较大的改进空间，
改进之后应该是一个很不错的东东。
------解决方案--------------------
测试完毕,的确不怎么好使,不过总体来说还不错,个人觉得还是以前论坛上有的几个拖动的例子比较好
------解决方案--------------------
代码稍作改进，已被JK收集：
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> JK:支持民族工业,尽量少买X货 </title>
<script language= "javascript ">
var currentResizeTdObj=null;
function MouseDownToResize(event,obj){
obj=obj||this;
event=event||window.event;
currentResizeTdObj=obj;
obj.mouseDownX=event.clientX;
obj.mouseDownY=event.clientY;
obj.tdW=obj.offsetWidth;
obj.tdH=obj.offsetHeight;
if(obj.setCapture) obj.setCapture();
else event.preventDefault();
}
function MouseMoveToResize(event){
if(!currentResizeTdObj) return ;
var obj=currentResizeTdObj;
event=event||window.event;
if(!obj.mouseDownX) return false;
if(obj.parentNode.rowIndex==0) {
var newWidth=obj.tdW*1+event.clientX*1-obj.mouseDownX;
if(newWidth> 0) obj.style.width = newWidth;
else obj.style.width =1;
}
if(obj.cellIndex==0){
var newHeight=obj.tdH*1+event.clientY*1-obj.mouseDownY;
if(newHeight> 0) obj.style.height = newHeight;
else obj.style.height =1;
}
}
function MouseUpToResize(){
if(!currentResizeTdObj) return;
if (currentResizeTdObj.releaseCapture) currentResizeTdObj.releaseCapture();
currentResizeTdObj=null;
}
//改变表格行列宽函数
function ResizeTable_Init(table,needChangeWidth,needChangeHeight)
{
if(!needChangeWidth && !needChangeHeight) return;
var oTh=table.rows[0];
if(needChangeWidth){
for(var i=0;i <oTh.cells.length;i++) {
var cell=oTh.cells[i];
cell.style.cursor= "e-resize ";
cell.style.width=cell.offsetWidth;
cell.onmousedown =MouseDownToResize;
}
}
if(needChangeHeight){
for(var j=0;j <table.rows.length;j++) {
var cell=table.rows[j].cells[0];
cell.style.cursor= "s-resize ";
cell.onmousedown =MouseDownToResize;
}
}
if(needChangeWidth && needChangeHeight) oTh.cells[0].style.cursor= "se-resize ";
table.style.width=null;
table.style.tableLayout= "fixed ";
}
//函数块定义结束
</script>
</head>
<body onmousemove= "MouseMoveToResize(event); " onmouseup= "MouseUpToResize(); " >
<div style= "font-size:10pt; ">
注1：改变Table的列宽 <br/>
注2：部分代码来自csdn网友bluedoctor:http://community.csdn.net/Expert/topic/5282/5282361.xml <br/>
<br/>
注：本页面仅在IE6/Firefox1.5下测试过(效果不一致)。其它浏览器或其它版本未经测试。 <br/>
注-----：JK： <a href= "mailTo:jk_10000@yahoo.com.cn?subject=About%20ChangeColumnWidth "> JK_10000@yahoo.com.cn </a> <br/>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
