js 实现table每列可左右拖动改变列的宽度

发布时间：2020年04月24日浏览次数：364 次

<!DOCTYPE HTML>
<html>
<head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>table</title>
</head>
<body>
      <table id="Table_ID" cellspacing="0" cellpadding="2" width="100%" border="1">
            <tbody>
                  <tr align="center" bgcolor="#dcdcdc">
                        <td width="80">用户编号</td>
                        <td>试用时间</td>
                        <td>转正时间</td>
                        <td>性别</td>
                        <td>姓名拼音</td>
                        <td>生日时间</td>
                        <td>民族</td>
                        <td>身高</td>
                  </tr>
                  <tr>
                        <td>2000001</td>
                        <td>1997-3-13</td>
                        <td>1997-3-13</td>
                        <td>1</td>
                        <td>WZJ</td>
                        <td>1965-3-13</td>
                        <td>汉</td>
                        <td>171</td>
                  </tr>
            </tbody>
      </table>
      <script type="text/javascript">
      var tTD; //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题
      var table = document.getElementById("Table_ID");
      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>

免责声明：本站相关技术文章信息部分来自网络，目的主要是传播更多信息，如果您认为本站的某些信息侵犯了您的版权，请与我们联系，我们会即时妥善的处理，谢谢合作！