<!DOCTYPE html>

 <html>

 <head>

     <meta charset="gbk">

     <title>table</title>

 </head>

 <body>

 <table id="tb_3" cellspacing="0" cellpadding="2" width="100%" border="1">

     <tbody>

     <tr align="center" bgcolor="#dcdcdc">

         <td style="width:100px;">用户编号</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>

     <tr>

         <td>2000045</td>

         <td>2001-2-15</td>

         <td>2001-3-15</td>

         <td>0</td>

         <td>WY</td>

         <td>1978-8-5</td>

         <td>汉</td>

         <td>162</td>

     </tr>

     <tr>

         <td>2000046</td>

         <td>2001-2-23</td>

         <td>2001-3-23</td>

         <td>0</td>

         <td>LQ</td>

         <td>2001-2-23</td>

         <td>汉</td>

         <td>171</td>

     </tr>

     </tbody>

 </table>

 <script type="text/javascript">

     var tTD; //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题

     var table = document.getElementById("tb_3");

     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>

原生js实现table表格列宽自由缩放的更多相关文章

  1. 原生js实现 table表格列宽拖拽

    查看效果 <!DOCTYPE html> <html> <head> <meta charset="gbk"> <title& ...

  2. 原生js封装table表格操作，获取任意行列td，任意单行单列方法

    V1.001更新增加findTable-min.js 本次更新,优化了代码性能方面,增加了部分新功能,可以获取多个table表格批量操作. 考虑到本人后面的项目中可能涉及到大量的表格操作,提前先封了 ...

  3. 使用jqueryUI实现自由调整表格列宽

    今天项目中需要插入表格,用Excel表格调整列宽时,想怎么拖就怎么拖,于是乎就让插入的表格也这么让人舒服.网上查找许久,没找到好用的方案.最后发现jQuery UI中的resizable()方法可以实 ...

  4. jQuery表格列宽可变，兼容firfox

    本demo使用jQuery包,实现表格列宽可拖拽功能,并实现页面reset时的重新布局.使用jQuery,方便函数的调用,给要处理的表格添加id 后,直接调用$("#id").mo ...

  5. js 实现table表格拖拽和点击表头升降序排序

    js 实现table表格拖拽和点击表头升降序排序,写的比较乱,用的时候可以把其中的一些模块函数提取出来 样式,由于是可拖拽表格,所以样式 table tr th{cursor:move;} js实现 ...

  6. 第十三篇 JS 操作table表格

    JS 操作table表格 这节课难度可能高一点,因为没有提前解释if判断.for循环.这节课是直接把这两样用上了,老师先简单介绍一下: if,判断语句,判断就很简单了嘛,假如说1=1(1等于1),当然 ...

  7. js创建table表格

    //js创建table表格var tr;var cell;for(var i=0;i<10;i++){ //创建一个tr tr=document.createElement('tr'); doc ...

  8. 原生js实现table的排序

    原生js实现table的排序 今天遇到了一个问题就是使用原生js对table标签进行排序 一开始的时候陷入了一个误区就是首先获取table,然后每次比较完大小都会交换children的值,准备到最后吧 ...

  9. JS获取table表格任意单元格值

    jsp页面表格布局 <body onload="show()"> <center> <input type="text" valu ...

随机推荐

  1. HTTP协议10-实体首部字段

    实体首部字段 实体首部字段是包含咋请求报文和响应报文中实体部分的首部,用于补充内容的更新时间等于实体相关的信息. 1)Allow Allow:GET,HEAD 用于通知客户端能够支持访问指定资源的请求 ...

  2. Windows平台下结合 tortoiseSVN 和 VisualSVN Server 搭建SVN服务器并实现 web 站点同步

    1. tortoiseSVN 关于 tortoiseSVN 的安装使用详见博文 TortoiseSVN的安装及其简单使用. 2. VisualSVN Server 关于 VisualSVN Serve ...

  3. springboot集成mybatis源码分析-启动加载mybatis过程（二）

    1.springboot项目最核心的就是自动加载配置,该功能则依赖的是一个注解@SpringBootApplication中的@EnableAutoConfiguration 2.EnableAuto ...

  4. Jenkins的详细安装及使用--windows

    操作环境:Windows 一.环境准备 1 安装JDK 本文采用jdk-8u111-windows-x64.exe: 2 配置tomcat 本文采用tomcat8,无需安装,配置JAVA_HOME及J ...

  5. Magic CSS3 一款独特的CSS3动画特效包

    插件描述: Magic CSS3 Animations  动画是一款独特的CSS3动画特效包,你可以自由地使用在您的网页中.只需简单的在页面上引入 CSS 文件:  magic.css  或者压缩版本 ...

  6. IntelliJ IDEA 使提示不区分大小写

    File ==> Settings ==> Editor ==> General ==> Code Completion 第一行 Match case 将默认勾选去掉

  7. SSM框架中常用的配置文件

    学习框架,刚开始的时候最烦的就是一些配置文件,有很多需要配置的东西,今天把这些配置文件信息稍微整理一下,以后说不定会用的到. web.xml文件 <?xml version="1.0& ...

  8. fft,ntt

    在被两题卡了常数之后,花了很久优化了自己的模板 现在的一般来说任意模数求逆1s跑3e5,exp跑1e5是没啥问题的(自己电脑,可能比luogu慢一倍) 当模数是$998244353,100453580 ...

  9. [原创]c# 岛2 小辅助~~~ 钓鱼 连击

  10. SQL反模式学习笔记6 支持可变属性【实体-属性-值】

    目标:支持可变属性 反模式:使用泛型属性表.这种设计成为实体-属性-值(EAV),也可叫做开放架构.名-值对. 优点:通过增加一张额外的表,可以有以下好处 (1)表中的列很少: (2)新增属性时,不需 ...