當(dāng)前位置：軟件學(xué)堂 > 資訊首頁(yè) > 網(wǎng)絡(luò)編程 > 編程其他 > JS代碼實(shí)現(xiàn)動(dòng)態(tài)改變表格列寬

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

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

移動(dòng)端

【實(shí)例名稱】

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

【實(shí)例描述】

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

【實(shí)例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>無(wú)標(biāo)題頁(yè)-學(xué)無(wú)憂（www.wangbatian.cn）</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)按下時(shí)的方法
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)移動(dòng)時(shí)的方法
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è)計(jì)寬度
    }
}
//鼠標(biāo)抬起時(shí)的方法
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>長(zhǎng)三</td><td>35</td><td>中國(guó)山東省濟(jì)南市天橋區(qū)</td>
</tr>
</table>
</body>
</html>

 

【運(yùn)行效果】

運(yùn)行效果

【難點(diǎn)剖析】

本例的重點(diǎn)是捕獲鼠標(biāo)的單擊和移動(dòng)事件，同時(shí)還要注意鼠標(biāo)圖形的變換。其中“setcapture’’主要用來(lái)捕獲鼠標(biāo)操作，而“ReleaseCapture”是用來(lái)釋放鼠標(biāo)的捕獲的。

【源碼下載】

如果你不愿復(fù)制代碼及提高代碼準(zhǔn)確性，你可以點(diǎn)擊：動(dòng)態(tài)改變表格列寬 進(jìn)行本實(shí)例源碼下載 

標(biāo)簽： JS代碼  表格  列寬