亚洲区不卡顿区在线观看,亚洲综合国产精品,亚洲精品麻豆av

JS實現可改變列寬的table實例

<!DOCTYPE HTML>

<html>

<head>

<title>table</title>

</head>

<body>

<tbody>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

var tTD; //用來存儲當前更改寬度的Table Cell,避免快速移動鼠標的問題

var table = document.getElementById("tb_1");

for (j = 0; j < table.rows[0].cells.length; j++) {

table.rows[0].cells[j].onmousedown = function () {

//記錄單元格

tTD = this;

if (event.offsetX > tTD.offsetWidth - 10) {

tTD.mouseDown = true;

tTD.oldX = event.x;

tTD.oldWidth = tTD.offsetWidth;

}

//記錄Table寬度

//table = tTD; while (table.tagName != ‘TABLE') table = table.parentElement;

//tTD.tableWidth = table.offsetWidth;

};

table.rows[0].cells[j].onmouseup = function () {

//結束寬度調整

if (tTD == undefined) tTD = this;

tTD.mouseDown = false;

tTD.style.cursor = 'default';

};

table.rows[0].cells[j].onmousemove = function () {

//更改鼠標樣式

if (event.offsetX > this.offsetWidth - 10)

this.style.cursor = 'col-resize';

else

this.style.cursor = 'default';

//取出暫存的Table Cell

if (tTD == undefined) tTD = this;

//調整寬度

if (tTD.mouseDown != null && tTD.mouseDown == true) {

tTD.style.cursor = 'default';

if (tTD.oldWidth + (event.x - tTD.oldX)>0)

tTD.width = tTD.oldWidth + (event.x - tTD.oldX);

//調整列寬

tTD.style.width = tTD.width;

tTD.style.cursor = 'col-resize';

//調整該列中的每個Cell

table = tTD; while (table.tagName != 'TABLE') table = table.parentElement;

for (j = 0; j < table.rows.length; j++) {

table.rows[j].cells[tTD.cellIndex].width = tTD.width;

}

//調整整個表

//table.width = tTD.tableWidth + (tTD.offsetWidth – tTD.oldWidth);

//table.style.width = table.width;

}

};

}

</script>

</body>

</html>

posted on 2013-09-01 23:27 我為J狂閱讀(875) 評論(1) 編輯收藏所屬分類: Web


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問
相關文章: JS實現可改變列寬的table實例 js校驗總結清緩存語句關于Frame的取值如何動態添加html元素使用Java2WSDL 命令出錯的解決方案 JavaScript中的方法重載 Iframe自適應頁面高度問題的最簡單最適用的解決辦法

# re: JS實現可改變列寬的table實例 2013-11-23 18:16 鳳凰

JS實現可改變列寬的table實例

評論

導航

統計

常用鏈接

留言簿(11)

隨筆分類(48)

文章分類(29)

常去逛逛

搜索

積分與排名

最新評論

閱讀排行榜

評論排行榜