htc控件的问题

extend 2003-09-04 09:50:15

就是要实现调节表格中列宽的功能,前面的例子看了,对javascript不熟,头晕中!!!
问题是:如何判断鼠标滑动到两列之间的?onmouseover事件函数如何写?

希望不是大段大段的代码,实在看不懂呀

...全文

61 1 打赏收藏转发到动态举报

写回复

用AI写文章

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

形印声传 2003-09-04

打赏
举报

提供一个动态改变表格的，一个html文件，调用一个实现功能的js；声明：不是我写的，是csdn上的一个大虾写的，我是引用一下：
*******************************************************
<html>
<head>
<script src="ResizeColRow.js" language="javascript"></script>
<META http-equiv=Content-Type content="text/html; charset=GBK">
<script language="javascript" src="ResizeColRow.js"></script>
</head>
把鼠標放於紅線上,本例限定隻能在第一行調行寬
<table id="tbl" border=1 cellspacing="0" cellpadding="0">
<tr><td style="border-right:1pt solid red;">標題一</td><td style="border-right:1pt solid red;">標題二</td><td>標題三</td></tr>
<tr><td style="border-bottom:1pt solid red;">內容一</td>
<td style="border-bottom:1pt solid red;">內容二</td>
<td style="border-bottom:1pt solid red;">內容三</td>
</tr>
<tr><td>內容A</td><td colspan=2>內容B</td></tr>
</table>
<script language="javascript">
SetResizeAble(document.all("tbl"))
</script>

==============ResizeColRow.js==================
var onDrag=0,gblResizeObj;

function SetResizeAble(argTable){
with(argTable){
attachEvent('onmousedown',ColResizeStart)
attachEvent('onmousemove',ColResizeIng)
attachEvent('onmouseup',ColResizeEnd)
}
}

function FindPos(obj){
var x=obj.offsetLeft, y=obj.offsetTop;
while(obj=obj.offsetParent){x += obj.offsetLeft;y += obj.offsetTop;}
this.intX=x; this.intY=y;
return this
}

function ColResizeStart(){
var srcObj=event.srcElement,tblParent=srcObj.parentElement;
while(tblParent.tagName!='TABLE')tblParent=tblParent.parentElement

if(srcObj.tagName!='TD')return
if(srcObj.parentElement.rowIndex==0){
if(srcObj.offsetWidth - event.offsetX <=3 && srcObj.cellIndex!=srcObj.parentElement.cells.length - 1){
gblResizeObj=tblParent.rows[srcObj.parentElement.rowIndex].cells[srcObj.cellIndex];
onDrag=1;
}
if(event.offsetX <=3 && srcObj.cellIndex != 0){
gblResizeObj=tblParent.rows[srcObj.parentElement.rowIndex].cells[srcObj.cellIndex - 1];
onDrag=1;
}
}else{
if(srcObj.offsetHeight - event.offsetY <=3 && srcObj.parentElement.rowIndex < tblParent.rows.length - 1){
gblResizeObj=tblParent.rows[srcObj.parentElement.rowIndex].cells[srcObj.cellIndex];
onDrag=2;
}
}
}

function ColResizeIng(){
var objSrcTd=event.srcElement,tblParent=objSrcTd.parentElement;
while(tblParent=tblParent.parentElement)if(tblParent.tagName=='TABLE')break;
if(objSrcTd.tagName == "TD" && (Math.abs(event.offsetX) <= 3 || Math.abs(objSrcTd.offsetWidth - event.offsetX)<=3) && objSrcTd.cellIndex != 0 && objSrcTd.parentElement.rowIndex==0){
objSrcTd.document.body.style.cursor='col-resize';
}
else{
if(objSrcTd.tagName == "TD" && Math.abs(objSrcTd.offsetHeight - event.offsetY)<=3 && objSrcTd.parentElement.rowIndex > 0 && objSrcTd.parentElement.rowIndex < tblParent.rows.length - 1){
objSrcTd.document.body.style.cursor='row-resize';
}else{
objSrcTd.document.body.style.cursor='default';
}
}
if(onDrag!=1 && onDrag!=2)return;
var trSrc=gblResizeObj.parentElement;

if(onDrag==1){
var intPosX=(new FindPos(gblResizeObj)).intX
gblResizeObj.style.pixelWidth = event.x - intPosX;
}
if(onDrag==2){
var intHeight=0,intPosY=(new FindPos(gblResizeObj)).intY
intHeight = objSrcTd.offsetHeight + event.y - intPosY;
tblParent.style.pixelHeight = intHeight * tblParent.rows.length
}
}

function ColResizeEnd(){
onDrag=0;
document.body.style.cursor='default'
}