[javascript]如何在table高度宽度固定的情况下，拖动表格的大小？？

在web开发javascript板块发布了这个问题，但没有人回答，希望这里有朋友帮忙。


一个固定大小的table，2行2列，
假定各个单元格分布如下

A B

C D

现在想通过鼠标拖动 D 单元格 ，来动态改变A个的高度和宽度并且整个Table的高度和宽度不变，现在的代码可以实现Table的宽度固定了，但table的高度固定不了，请大家帮忙，忙了一下午了，还是解决不了。

代码如下


<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
</head>

<script type="text/javascript">
var currentClickObj = null;
var currentMoveObj = document.getElementById("TDFirst"); //当前拖动对象
var relWidth; //鼠标按下位置相对对象位置
var relHeight;
var elX;
var elY;
var mouseDownY;
var mouseDownX;
var zindex=-1;//控制被拖动对象的z-index值（对象在页面中的位置）
var tableParent = document.getElementById("TargetTable");
var parentWidth = tableParent.offsetWidth;
var parentHeight = tableParent.offsetHeight;


//鼠标按下
function OnMouseDown1(obj)
{
currentClickObj = obj; //当对象被按下时，记录该对象

currentMoveObj = document.getElementById("TDFirst");
tableParent = document.getElementById("TargetTable");


relWidth = currentMoveObj.offsetWidth;
relHeight = currentMoveObj.offsetHeight;
zindex=currentClickObj.style.zIndex; //记录原z-index值
currentClickObj.style.zIndex=2;
currentClickObj.setCapture(); //事件捕获
mouseDownY = event.clientY;
mouseDownX = event.clientX;
// parentWidth = tableParent.offsetWidth;
// parentHeight = tableParent.offsetHeight;

}
//
//鼠标移动
//
function OnMouseMove1(obj)
{
if(currentClickObj != null)
{

var TDSecond2 = document.getElementById("TDSecond");
currentMoveObj = document.getElementById("TDFirst");
tableParent = document.getElementById("TargetTable");



var newWidth =relWidth + event.clientX-mouseDownX ;
if(newWidth<1) newWidht=1;//防左移出 offsetWidth 253 Long

if(newWidth >parentWidth - 1) //防右移出
{
newLeft=parentWidth - 1;

}


currentMoveObj.style.pixelWidth = newWidth;
// currentClickObj.style.pixelWidth = parentWidth - newWidth;
// TDSecond2.style.pixelHeight = parentHeight - newHeight;



var newHeight =relHeight + event.clientY-mouseDownY;

if(newHeight<1) newHeight = 1;//防上移出
if(newHeight > parentHeight - 10 ) //防下移出
{
newHeight=parentHeight - 10;

}

currentMoveObj.style.pixelHeight = newHeight;
// currentClickObj.style.pixelHeight = parentHeight - newHeight;
// TDSecond2.style.pixelHeight = parentHeight - newHeight;



}
}
//
//释放鼠标
//
function OnMouseUp1()
{
if(currentClickObj != null)
{
currentClickObj.style.zIndex=zindex; //恢复zIndex
zindex=-1;
currentClickObj.releaseCapture(); //当鼠标释放时同时释放事件捕获
currentClickObj = null; //当鼠标释放时同时释放拖动对象
}
}
</script>



<body>
<table style="width: 452px; height: 379px; " border=1 id="TargetTable" >

<tr>
<td style="width: 7px; height: 2px" id="TDFirst">
 </td>
<td >
 </td>
</tr>
<tr>
<td id="TDSecond">
 </td>
<td height="100%" style="overflow:hidden;" align="left" valign="top" onmousedown="OnMouseDown1(this)" onmousemove="OnMouseMove1(this)" onmouseup="OnMouseUp1(this)" >
12</td>
</tr>

</table>



</body>
</html>