怎样用鼠标改变 Table 单元格的宽度？

可以
但不是一下就能讲清楚

解决方案 »

  1.   

    那个好像比较麻烦的说，IE6可以实现的比较好
      

  2.   

    <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'
    }