原生js实现table表格列宽自由缩放

 

  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>
View Code

 

posted on 2018-04-18 09:09  longlinji  阅读(987)  评论(0)    收藏  举报