1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="gbk">
5 <title>table</title>
6 </head>
7 <body>
8 <table id="tb_3" cellspacing="0" cellpadding="2" width="100%" border="1">
9 <tbody>
10 <tr align="center" bgcolor="#dcdcdc">
11 <td style="width:100px;">用户编号</td>
12 <td>试用时间</td>
13 <td>转正时间</td>
14 <td>性别</td>
15 <td>姓名拼音</td>
16 <td>生日时间</td>
17 <td>民族</td>
18 <td>身高</td>
19 </tr>
20 <tr>
21 <td>2000001</td>
22 <td>1997-3-13</td>
23 <td>1997-3-13</td>
24 <td>1</td>
25 <td>WZJ</td>
26 <td>1965-3-13</td>
27 <td>汉</td>
28 <td>171</td>
29 </tr>
30 <tr>
31 <td>2000045</td>
32 <td>2001-2-15</td>
33 <td>2001-3-15</td>
34 <td>0</td>
35 <td>WY</td>
36 <td>1978-8-5</td>
37 <td>汉</td>
38 <td>162</td>
39 </tr>
40 <tr>
41 <td>2000046</td>
42 <td>2001-2-23</td>
43 <td>2001-3-23</td>
44 <td>0</td>
45 <td>LQ</td>
46 <td>2001-2-23</td>
47 <td>汉</td>
48 <td>171</td>
49 </tr>
50 </tbody>
51 </table>
52 <script type="text/javascript">
53 var tTD; //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题
54 var table = document.getElementById("tb_3");
55 for (j = 0; j < table.rows[0].cells.length; j++) {
56 table.rows[0].cells[j].onmousedown = function () {
57 //记录单元格
58 tTD = this;
59 if (event.offsetX > tTD.offsetWidth - 10) {
60 tTD.mouseDown = true;
61 tTD.oldX = event.x;
62 tTD.oldWidth = tTD.offsetWidth;
63 }
64 //记录Table宽度
65 //table = tTD; while (table.tagName != ‘TABLE') table = table.parentElement;
66 //tTD.tableWidth = table.offsetWidth;
67 };
68 table.rows[0].cells[j].onmouseup = function () {
69 //结束宽度调整
70 if (tTD == undefined) tTD = this;
71 tTD.mouseDown = false;
72 tTD.style.cursor = 'default';
73 };
74 table.rows[0].cells[j].onmousemove = function () {
75 //更改鼠标样式
76 if (event.offsetX > this.offsetWidth - 10)
77 this.style.cursor = 'col-resize';
78 else
79 this.style.cursor = 'default';
80 //取出暂存的Table Cell
81 if (tTD == undefined) tTD = this;
82 //调整宽度
83 if (tTD.mouseDown != null && tTD.mouseDown == true) {
84 tTD.style.cursor = 'default';
85 if (tTD.oldWidth + (event.x - tTD.oldX) > 0)
86 tTD.width = tTD.oldWidth + (event.x - tTD.oldX);
87 //调整列宽
88 tTD.style.width = tTD.width;
89 tTD.style.cursor = 'col-resize';
90 //调整该列中的每个Cell
91 table = tTD;
92 while (table.tagName != 'TABLE') table = table.parentElement;
93 for (j = 0; j < table.rows.length; j++) {
94 table.rows[j].cells[tTD.cellIndex].width = tTD.width;
95 }
96 //调整整个表
97 //table.width = tTD.tableWidth + (tTD.offsetWidth – tTD.oldWidth);
98 //table.style.width = table.width;
99 }
100 };
101 }
102 </script>
103 </body>
104 </html>
