| 标题 | |||
| 2 | |||
-------------页面代码 ----------------------
<html>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>改变行列宽的表格（按钮方式）</title>
<script language="javascript">
var oldMouseX=0;
var oldMouseY=0;
var currButton=null;
function myMouseDown(obj)
{
if(obj.MoveX=="true") obj.style.cursor="w-resize"; else obj.style.cursor="s-resize";
obj.IsMouseDown=true;
oldMouseX=window.event.x;
oldMouseY=window.event.y;
currButton=obj;
}
function myMouseMove(obj)
{
if(obj.IsMouseDown)
{
if(obj.MoveX=="true")
{
var oldWidth=parseInt(obj.style.width);
obj.style.width=oldWidth+(window.event.x-oldMouseX);
oldMouseX=window.event.x;
var oTable=obj.parentElement.parentElement.parentElement;
var oTr=obj.parentElement.parentElement;
var currColIndex=0;
for(var m=0;m<oTr.cells.length;m++)
{
if(oTr.cells[m].children[0]==obj)
{
currColIndex=m;break;
}
}
for(var i=1;i<oTable.rows.length;i++)
{
if (oTable.rows[i].cells[currColIndex].children.length>0)
oTable.rows[i].cells[currColIndex].children[0].style.width=obj.style.width;
}
}
else
{
var oldHeight=parseInt(obj.style.height);
obj.style.height=oldHeight+(window.event.y-oldMouseY);
oldMouseY=window.event.y;
var oTr=obj.parentElement.parentElement;
for(var i=1;i<oTr.cells.length;i++){
if(oTr.cells[i].children.length>0)
oTr.cells[i].children[0].style.height=obj.style.height;
}
}
}
}
function myMouseUp(obj)
{
obj.style.cursor="default";
obj.IsMouseDown=false;
}
</script>
</head>
<body>
改变行列宽度的表格（按钮式）
<table border="1" width="43%" id="table1" bgcolor="#C0C0C0" style="border-collapse: collapse" bordercolor="#808000" cellspacing="0" cellpadding="0">
<tr>
<td width="68">
<input type=button style="width: 67; height: 20; border-style: solid; border-width: 1px"
onmousedown="myMouseDown(this)" onmousemove="myMouseMove(this)" onmouseup="myMouseUp(this)"></td>
<td width="139" id="td99">
<input type=button style="width: 139; height: 21; border-style: solid; border-width: 1px"
onmousedown="myMouseDown(this)" onmousemove="myMouseMove(this)" onmouseup="myMouseUp(this)" MoveX="true" value="UserID" ></td>
<td><span style="width: 67; height: 20; border-style: solid; border-width: 1px"
onmousedown="myMouseDown(this)" onmousemove="myMouseMove(this)" onmouseup="myMouseUp(this)" MoveX="true">标题</span>
</td>
<td>
<input type=button style="width: 150; height: 20; border-style: solid; border-width: 1px"
onmousedown="myMouseDown(this)" onmousemove="myMouseMove(this)" onmouseup="myMouseUp(this)" value="UserName" MoveX="true"></td>
</tr>
<tr>
<td width="68">
<input type=button style="width: 67; height: 19; border-style: solid; border-width: 1px"
onmousedown="myMouseDown(this)" onmousemove="myMouseMove(this)" onmouseup="myMouseUp(this)"></td>
<td width="139">
<input type=text value="1" style="border-style: solid; border-width: 1px" size="19" name="t"></td>
<td>
2</td>
<td>
<input type=text value="张三" style="border-style: solid; border-width: 1px" size="21" name="t0"></td>
</tr>
<tr>
<td width="68">
<input type=button style="width: 68; height: 19; border-style: solid; border-width: 1px"
onmousedown="myMouseDown(this)" onmousemove="myMouseMove(this)" onmouseup="myMouseUp(this)"></td>
<td width="139">
<input type=text value="2" style="border-style: solid; border-width: 1px" size="19" name="t1"></td>
<td>
<input type=text value="1" style="border-style: solid; border-width: 1px" size="15" name="t4"></td>
<td>
<input type=text value="李四" style="border-style: solid; border-width: 1px" size="21" name="t2"></td>
</tr>
</table>
</body>
</html>