<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>可改变宽度的table</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<SCRIPT>
//记录鼠标状态, 记录鼠标按下, 记录当前列
var curState, curDown, curCol;
var oldPlace, newPlace;
function getTable(item) {
var obj = null;
do {
if (item.tagName=="TABLE") {
obj = item;
break;
}
item = item.offsetParent;
}
while (item != null);
return obj;
}
function calculateOffset(item, offsetName) {
var totalOffset = 0;
do {
totalOffset += eval('item.offset' + offsetName);
item = item.offsetParent;
}
while (item != null);
return totalOffset;
}
function moveCol(objCol) {
window.status = window.document.body.scrollLeft;
if (!curDown) {
//curCol = objCol;
///鼠标没有按下
if (window.event.x + window.document.body.scrollLeft > calculateOffset(objCol, "Left") + objCol.offsetWidth - 3
&& window.event.x + window.document.body.scrollLeft < calculateOffset(objCol, "Left") + objCol.offsetWidth )
{
//移动到了相应的部位/改变鼠标
curState=true;
window.document.body.style.cursor = "w-resize";
}
else
{
curState = false;
window.document.body.style.cursor = "default";
}
curCol = objCol;
}
}
function upBody()
{
if (curState)
{
//调整条件:(层左侧+线左侧=线绝对左侧坐标)>目标的左侧坐标+20
//并且左边不会占到整个的一半宽度
newPlace = window.event.x + window.document.body.scrollLeft;
if (myDiv.offsetLeft + myLine.offsetLeft > calculateOffset(curCol, "Left") + 20
)
{
if (curCol.width > oldPlace - newPlace)
curCol.width -= oldPlace - newPlace;
var curTable = getTable(curCol);
// if (curTable!=null)
//curTable.width -= oldPlace - newPlace;
window.document.all.tdright.style.width = 750 - curCol.width ;
}
//-------------------------------------------------------------
curState = false;
curDown = false;
myDiv.style.display = "none";
window.document.body.style.cursor = "default";
}
}
function downBody()
{
//鼠标按下
if (curState)
{
curDown = true;
var curTable = getTable(window.event.srcElement);
if (curTable!=null)
{
//---------定位竖线----------
myDiv.style.display = ""; //层可见
myLine.style.height = curTable.offsetHeight;
myLine.style.width = 1;
myDiv.style.left = window.event.x + window.document.body.scrollLeft - myLine.offsetLeft;
myDiv.style.top = calculateOffset(curTable, "Top") - myLine.offsetTop;
//---------------------------
oldPlace = window.event.x + window.document.body.scrollLeft;
}
}
}
function moveBody()
{
//鼠标移动
if (curDown)
{
//鼠标按下状态
myDiv.style.left = window.event.x + window.document.body.scrollLeft - myLine.offsetLeft;
window.document.body.style.cursor = "w-resize";
}
}
function selectBody() {
//鼠标选择文本[不支持动态调整?]
if (curDown) //鼠标按下于调整状态
window.event.returnValue = false;
}
</SCRIPT>
</HEAD>
<body onmouseup="upBody()" onselectstart="selectBody()" onmousedown="downBody()" onmouseover="moveBody()"
bottomMargin="0" leftMargin="0" topMargin="0" rightMargin="0">
<DIV id="myDiv" style="DISPLAY: none; Z-INDEX: 1; LEFT: 12px; WIDTH: 0px; POSITION: absolute; TOP: 50px; HEIGHT: 100%">
<HR id="myLine" width="1" color="black" noShade SIZE="200">
</DIV>
<form name="Form1" method="post" action="FileShareBrowse.aspx?FileShareID=9b00cf00-ec2d-4aa5-a45a-0f1f3dcf1fb3"
id="Form1">
<TABLE style="FONT-SIZE: 9pt" height="100%" cellSpacing="0" cellPadding="0" width="100%"
border="0" ID="Table1">
<tr>
<td>
<TD vAlign="top">
<TABLE style="BORDER-RIGHT: #4f91b1 1px solid; BORDER-TOP: #4f91b1 1px solid; FONT-SIZE: 9pt; BORDER-LEFT: #4f91b1 1px solid; BORDER-BOTTOM: #4f91b1 1px solid"
height="100%" cellSpacing="0" cellPadding="0" width="500" border="0" ID="Table10">
<!--Main-->
<tr>
<td onmousemove="moveCol(this)" id="tdleft" vAlign="top" width="120" height="100%">
左
</td>
<TD id="tdright" vAlign="top" width="590" style=" BORDER-LEFT: #3d88ad 2px double" height="100%" bgcolor="yellow">
右
</TD>
</tr>
<!--EndMain--></TABLE>
</TD>
</tr>
</TABLE>
</form>
</body>
</HTML>
<HTML>
<HEAD>
<title>可改变宽度的table</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<SCRIPT>
//记录鼠标状态, 记录鼠标按下, 记录当前列
var curState, curDown, curCol;
var oldPlace, newPlace;
function getTable(item) {
var obj = null;
do {
if (item.tagName=="TABLE") {
obj = item;
break;
}
item = item.offsetParent;
}
while (item != null);
return obj;
}
function calculateOffset(item, offsetName) {
var totalOffset = 0;
do {
totalOffset += eval('item.offset' + offsetName);
item = item.offsetParent;
}
while (item != null);
return totalOffset;
}
function moveCol(objCol) {
window.status = window.document.body.scrollLeft;
if (!curDown) {
//curCol = objCol;
///鼠标没有按下
if (window.event.x + window.document.body.scrollLeft > calculateOffset(objCol, "Left") + objCol.offsetWidth - 3
&& window.event.x + window.document.body.scrollLeft < calculateOffset(objCol, "Left") + objCol.offsetWidth )
{
//移动到了相应的部位/改变鼠标
curState=true;
window.document.body.style.cursor = "w-resize";
}
else
{
curState = false;
window.document.body.style.cursor = "default";
}
curCol = objCol;
}
}
function upBody()
{
if (curState)
{
//调整条件:(层左侧+线左侧=线绝对左侧坐标)>目标的左侧坐标+20
//并且左边不会占到整个的一半宽度
newPlace = window.event.x + window.document.body.scrollLeft;
if (myDiv.offsetLeft + myLine.offsetLeft > calculateOffset(curCol, "Left") + 20
)
{
if (curCol.width > oldPlace - newPlace)
curCol.width -= oldPlace - newPlace;
var curTable = getTable(curCol);
// if (curTable!=null)
//curTable.width -= oldPlace - newPlace;
window.document.all.tdright.style.width = 750 - curCol.width ;
}
//-------------------------------------------------------------
curState = false;
curDown = false;
myDiv.style.display = "none";
window.document.body.style.cursor = "default";
}
}
function downBody()
{
//鼠标按下
if (curState)
{
curDown = true;
var curTable = getTable(window.event.srcElement);
if (curTable!=null)
{
//---------定位竖线----------
myDiv.style.display = ""; //层可见
myLine.style.height = curTable.offsetHeight;
myLine.style.width = 1;
myDiv.style.left = window.event.x + window.document.body.scrollLeft - myLine.offsetLeft;
myDiv.style.top = calculateOffset(curTable, "Top") - myLine.offsetTop;
//---------------------------
oldPlace = window.event.x + window.document.body.scrollLeft;
}
}
}
function moveBody()
{
//鼠标移动
if (curDown)
{
//鼠标按下状态
myDiv.style.left = window.event.x + window.document.body.scrollLeft - myLine.offsetLeft;
window.document.body.style.cursor = "w-resize";
}
}
function selectBody() {
//鼠标选择文本[不支持动态调整?]
if (curDown) //鼠标按下于调整状态
window.event.returnValue = false;
}
</SCRIPT>
</HEAD>
<body onmouseup="upBody()" onselectstart="selectBody()" onmousedown="downBody()" onmouseover="moveBody()"
bottomMargin="0" leftMargin="0" topMargin="0" rightMargin="0">
<DIV id="myDiv" style="DISPLAY: none; Z-INDEX: 1; LEFT: 12px; WIDTH: 0px; POSITION: absolute; TOP: 50px; HEIGHT: 100%">
<HR id="myLine" width="1" color="black" noShade SIZE="200">
</DIV>
<form name="Form1" method="post" action="FileShareBrowse.aspx?FileShareID=9b00cf00-ec2d-4aa5-a45a-0f1f3dcf1fb3"
id="Form1">
<TABLE style="FONT-SIZE: 9pt" height="100%" cellSpacing="0" cellPadding="0" width="100%"
border="0" ID="Table1">
<tr>
<td>
<TD vAlign="top">
<TABLE style="BORDER-RIGHT: #4f91b1 1px solid; BORDER-TOP: #4f91b1 1px solid; FONT-SIZE: 9pt; BORDER-LEFT: #4f91b1 1px solid; BORDER-BOTTOM: #4f91b1 1px solid"
height="100%" cellSpacing="0" cellPadding="0" width="500" border="0" ID="Table10">
<!--Main-->
<tr>
<td onmousemove="moveCol(this)" id="tdleft" vAlign="top" width="120" height="100%">
左
</td>
<TD id="tdright" vAlign="top" width="590" style=" BORDER-LEFT: #3d88ad 2px double" height="100%" bgcolor="yellow">
右
</TD>
</tr>
<!--EndMain--></TABLE>
</TD>
</tr>
</TABLE>
</form>
</body>
</HTML>