JS代碼實現(xiàn)動態(tài)改變表格列寬

2012/10/30 17:50:16作者：佚名來源：網(wǎng)絡(luò)

移動端

【實例名稱】

表格動態(tài)改變表格列寬

【實例描述】

每個控件都有很多的屬性，如id、name、樣式、高度、寬度、value等。項目中經(jīng)常需要修改這些屬性值，本例就學(xué)習(xí)如何獲取頁面元素的屬性。

【實例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>無標(biāo)題頁-學(xué)無憂（denvermotorcycleaccidentlawyer.com）</title>
<style>
    .resizeDivClass
    {
    position:relative;
    background-color:gray;
    width:2;
    z-index:1;
    left:expression(this.parentElement.offsetWidth-1);
    cursor:e-resize;
}
</style>
<script language=javascript>
//鼠標(biāo)按下時的方法
function MouseDownToResize(obj)
{
    obj.mouseDownX=event.clientX;                 //當(dāng)前鼠標(biāo)X坐標(biāo)
    obj.pareneTdW=obj.parentElement.offsetWidth;  
//父元素的寬度
    obj.pareneTableW=table1.offsetWidth;          
//表格的寬度
    obj.setCapture();                             
//捕獲鼠標(biāo)方法
}
//鼠標(biāo)移動時的方法
function MouseMoveToResize(obj)
{
    if(!obj.mouseDownX) return false;             
//判斷是否是否已經(jīng)按下
    var newWidth=obj.pareneTdW*1+event.clientX*1-obj.mouseDownX;
    if(newWidth>0)
    {
        obj.parentElement.style.width = newWidth;
        table1.style.width=obj.pareneTableW*
1+event.clientX*1-obj.mouseDownX;
//重新設(shè)計寬度
    }
}
//鼠標(biāo)抬起時的方法
function MouseUpToResize(obj)
{
    obj.releaseCapture();                      
//釋放鼠標(biāo)的捕獲
    obj.mouseDownX=0;                          
//鼠標(biāo)抬起
}
</script>
</head>
<body>
<table id=table1 STYLE="table-layout:fixed" >
<tr bgcolor=cccccc >
<td valign=top >
<font class="resizeDivClass" onmousedown="MouseDownToResize(this);" 
onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>
姓名</td>
<td valign=top >
<font class="resizeDivClass" onmousedown="MouseDownToResize(this);" 
onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>
年齡</td>
<td valign=top >
<font class="resizeDivClass" onmousedown="MouseDownToResize(this);" 
onmousemove="MouseMoveToResize(this);" onmouseup="MouseUpToResize(this);"></font>
所在城市</td>
</tr>
<tr>
<td>長三</td><td>35</td><td>中國山東省濟(jì)南市天橋區(qū)</td>
</tr>
</table>
</body>
</html>

【運行效果】

運行效果