今天做了一个可以改变行列宽的表格,大家看看怎么样? mouse的处理很不“和谐”呵呵 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 采用TD样式拖动的确不是很方便,但是还有一个例子(在我的博客里面)用button拖动的,我觉得比较好用。 代码稍作改进,已被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:[email protected]?subject=About%20ChangeColumnWidth">[email protected]</a><br/> <hr/> </div><table border="1" id="table1" style="width:100%;background-color:#eeeeee;" > <tr id="TH1"> <td > </td> <td >header1</td> <td >header2</td> <td >header3</td> <td >hello hello hello</td> </tr> <tr> <td >1</td> <td >1</td> <td > thank you thany you </td> <td >男儿气壮</td> <td ><select><option>hello Hello</option></select></td> </tr> <tr> <td >2</td> <td >2</td> <td > you are welcome </td> <td >胸中吐万丈长虹</td> <td ><input type="text" name="T4" size="20" value="Hello Hello"></td> </tr></table><script language ="javascript">ResizeTable_Init(document.getElementById("table1"),true,true);</script></body></html> 楼主不错,厉害 ,jk写的好使多了 收藏了 但是有个问题 在拖表格到很大的时候,旁边的td会消失 JK_10000 兄弟写的还是不错的,功能跟我的一样,单元格(0,0)的拖动有创意。不过我的代码还能处理单元格里面的控件大小。回atmo:使用表头里面用按钮的样式,不会出现你说的问题。具体见我的博客。 "不过我的代码还能处理单元格里面的控件大小。"----可以通过css设定,不需要用js改变其大小 "不过我的代码还能处理单元格里面的控件大小。"----可以通过css设定,不需要用js改变其大小通过CSS设定那时静态的,如果改变了列宽,单元格里面的TextBox也改变到一样的列宽,这才是实用的方案。 <input type="text" name="T4" size="20" value="Hello Hello" >--->>><input type="text" name="T4" size="20" value="Hello Hello" style="width:99%;"> WEB开发 菜鸟求问,关于弹出层上面的选项卡切换问题 一个右下角飘浮广告的JS,IE正常,CHROME下有问题 js判断滚动条位置的变化 运行这段代码但是不显示结果 怎么会这样呢 showModalDialog 问题!·!! 100分 100分 100分 100分 100分 100分 Object 这么用可以吗? 怎样使子窗口未关闭前不能操作父窗口 js类方法,对象方法,原型的理解 如何检测当前IE是否开启了弹出窗口阻止程序? 请问如何做出CSDN首页排行榜下面那样的页面?
<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:[email protected]?subject=About%20ChangeColumnWidth">[email protected]</a><br/>
<hr/>
</div>
<table border="1" id="table1" style="width:100%;background-color:#eeeeee;" >
<tr id="TH1">
<td > </td>
<td >header1</td>
<td >header2</td>
<td >header3</td>
<td >hello hello hello</td>
</tr>
<tr>
<td >1</td>
<td >1</td>
<td >
thank you thany you </td>
<td >男儿气壮</td>
<td ><select><option>hello Hello</option></select></td>
</tr>
<tr>
<td >2</td>
<td >2</td>
<td >
you are welcome </td>
<td >胸中吐万丈长虹</td>
<td ><input type="text" name="T4" size="20" value="Hello Hello"></td>
</tr>
</table>
<script language ="javascript">
ResizeTable_Init(document.getElementById("table1"),true,true);
</script>
</body></html>
但是有个问题 在拖表格到很大的时候,旁边的td会消失
回atmo:
使用表头里面用按钮的样式,不会出现你说的问题。具体见我的博客。
--->>>
<input type="text" name="T4" size="20" value="Hello Hello" style="width:99%;">