四虎影视精品,日本一区二区精品视频,亚洲日本无吗高清不卡

【原汁咖啡】

JS實現(xiàn)可改變列寬的table實例

<!DOCTYPE HTML>

<html>

<head>

<title>table</title>

</head>

<body>

<tbody>

<td>試用時間</td><td>轉(zhuǎn)正時間</td><td>性別</td><td>姓名拼音</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

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

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 () {

//結(jié)束寬度調(diào)整

if (tTD == undefined) tTD = this;

tTD.mouseDown = false;

tTD.style.cursor = 'default';

};

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

//更改鼠標(biāo)樣式

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

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

else

this.style.cursor = 'default';

//取出暫存的Table Cell

if (tTD == undefined) tTD = this;

//調(diào)整寬度

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);

//調(diào)整列寬

tTD.style.width = tTD.width;

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

//調(diào)整該列中的每個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;

}

//調(diào)整整個表

//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


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




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

<

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

導(dǎo)航

統(tǒng)計

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

常用鏈接

留言簿(11)

隨筆分類(48)

文章分類(29)

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

JS實現(xiàn)可改變列寬的table實例

評論

導(dǎo)航

統(tǒng)計

常用鏈接

留言簿(11)

隨筆分類(48)

文章分類(29)

常去逛逛

搜索

積分與排名

最新評論

閱讀排行榜

評論排行榜