<!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. 第十三章 部署Java应用程序

    打包 清单文件被命名为MANIFEST.MF,用于描述归档特征. 清单文件被分为多个节, 第一节被称为主节,作用于整个文件; 其他节则必须起始于Name的条目. 节之间空行分开. jar cfm JA ...

  2. Spring系列(零) Spring Framework 文档中文翻译

    Spring 框架文档(核心篇1和2) Version 5.1.3.RELEASE 最新的, 更新的笔记, 支持的版本和其他主题,独立的发布版本等, 是在Github Wiki 项目维护的. 总览 历 ...

  3. 老师博客copy -高阶函数2

    新闻 管理   Py西游攻关之函数   一 函数是什么? 函数一词来源于数学,但编程中的「函数」概念,与数学中的函数是有很大不同的,具体区别,我们后面会讲,编程中的函数在英文中也有很多不同的叫法.在B ...

  4. 【原创】大叔案例分享（3）用户行为分析--见证scala的强大

    一 场景分析 用户行为分析应用的场景很多,像线上网站访问统计,线下客流分析(比如图像人脸识别.wifi探针等),比较核心的指标有几个: PV | UV | SD | SC 指标说明: PV(Page ...

  5. hadoop的master和slave模式

    hadoop的集群是基于master/slave模式. namenode和jobtracker属于master,datanode和tasktracker属于slave,master只有一个,而slav ...

  6. JavaScript入门学习笔记(异常处理)

    try:语句测试代码块的错误,当try中的代码块出错时执行catch中的代码块. catch:语句处理错误: throw:语句创建或抛出自定义异常. 三者一起使用可以控制程序流并生成自定义异常信息. ...

  7. Android 杂谈---帧动画

    Android中的动画有 帧动画 属性动画 补间动画 大体思路 1.需要定义存放每一帧的xml文件,放在drawable文件夹下 设置图片路径和duration,以及shot属性,false---&g ...

  8. jdbc和odbc

    JDBC简介 JDBC(Java Data Base Connectivity,java数据库连接)是一种用于执行SQL语句的Java API,它是Java十三个规范之一.可以为多种关系数据库提供统一 ...

  9. python爬虫遇到https站点InsecureRequestWarning警告解决方案

    python爬虫遇到https站点InsecureRequestWarning警告解决方案 加三行代码即可 from requests.packages.urllib3.exceptions impo ...

  10. 11 安装已集成HA的树莓派镜像Hassbian

    2017-09-04 10:40:47 下载Hassbian镜像文件,浏览https://github.com/home-assistant/pi-gen/releases/tag/v1.23,查看最 ...