最新天堂资源在线资源,亚洲精品一级二级,2019中文亚洲字幕

【原汁咖啡】

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狂閱讀(874) 評論(1) 編輯收藏所屬分類: Web


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




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

<

2013年11月

>

日

一

二

三

四

五

六

27

28

29

30

31

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

1

2

3

4

5

6

7

統計

隨筆 - 47
文章 - 30
評論 - 327
引用 - 0

常用鏈接

留言簿(11)

隨筆分類(48)

文章分類(29)

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

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

評論

導航

統計

常用鏈接

留言簿(11)

隨筆分類(48)

文章分類(29)

常去逛逛

搜索

積分與排名

最新評論

閱讀排行榜

評論排行榜