表格单元格的宽度与高度是自由拖动来改变,但如何从中拿到单元格的宽度值呢?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>table</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
var startx=0;
var mousePress=false;
var destElm;
var oldWidth=40;
function down()
{
startx = event.x;
mousePress=true;
with (event.srcElement)
destElm = parentNode.cells[cellIndex-1]
oldWidth = destElm.offsetWidth;
}
function up()
{
mousePress=false;
}
function move()
{
if (!mousePress) return;
var d=event.x-startx+oldWidth;
if (d>0) destElm.width=d;
}
//-->
</SCRIPT>
<style>
.left {border-left:1px solid black}
.top {border-top:1px solid black}
.left-top {border-top:1px solid black;border-left:1px solid black}
TABLE{border:1px solid black}
</style>
</head>
<body onmousemove=move() onmouseup=up()>
<table>
<tr>
<td>IPC</td><td style="cursor:e-resize;" onmousedown=down()></td>
<td class=left>IPC</td><td style="cursor:e-resize" onmousedown=down()></td>
<td class=left>IPC</td><td style="cursor:e-resize" onmousedown=down()></td>
<td class=left>IPC</td><td style="cursor:e-resize" onmousedown=down()></td>
</tr>
<tr>
<td class=top>fgqa</td><td style="cursor:e-resize" onmousedown=down()></td>
<td class=left-top>fgqa</td><td style="cursor:e-resize" onmousedown=down()></td>
<td class=left-top>fgqa</td><td style="cursor:e-resize" onmousedown=down()></td>
<td class=left-top>fgqa</td><td style="cursor:e-resize" onmousedown=down()></td>
</tr>
<tr>
<td class=top>fgqa</td><td style="cursor:e-resize" onmousedown=down()></td>
<td class=left-top>fgqa</td><td style="cursor:e-resize" onmousedown=down()></td>
<td class=left-top>fgqa</td><td style="cursor:e-resize" onmousedown=down()></td>
<td class=left-top>fgqa</td><td style="cursor:e-resize" onmousedown=down()></td>
</tr>
</table>
</body>
</html>