<!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. php页面编码设置

    php的header来定义一个php页面为utf编码或GBK编码 php页面为utf编码 header("Content-type: text/html; charset=utf-8&quo ...

  2. 第一章 Bootstrap简介

    一.Bootstrap简介 Bootstrap是基于 HTML.CSS.JAVASCRIPT 的前端框架,它简洁灵活,使得 Web 开发更加快捷.它由Twitter的设计师Mark Otto和Jaco ...

  3. java.lang.NoClassDefFoundError: org/apache/commons/lang3/StringUtils

    ♦ 问题所在:项目lib包里少一个jar包 ♦ 解决办法: commons-lang3-3.1.jar 导入到项目就ok

  4. 【easy】404. Sum of Left Leaves

    求所有左节点的和. /** * Definition for a binary tree node. * struct TreeNode { * int val; * TreeNode *left; ...

  5. C# 微信开发-----微信会员卡(三)激活会员卡

    在会员领取了会员卡之后需要做 一个跳转性激活,模式请看下图: 在创建会员卡的时候需要配置下这个参数的值: memberActivate.aspx页面代码如下: <%@ Page Language ...

  6. 七.HTTP协议原理介绍

    01. 当用户访问一个网站时,都发生了事情? ①. 利用DNS服务,将输入的域名解析为相应的IP地址   a --本地主机输入域名后,会查询本地缓存信息和本地hosts文件 如果有就进行解析,如果没有 ...

  7. 页面报错时隐藏Tomcat信息

    一.问题描述Tomcat报错页面泄漏Apache Tomcat/8.0.53相关版本号信息,是攻击者攻击的途径之一.因此实际当中建议去掉版本号信息. 二.解决办法1.进入到tomcat/lib目录下, ...

  8. main函数中System.exit()的作用

    main()主函数再熟悉不过,了解java的人也都知道System.exit()方法是停止虚拟机运行.那这里为什么还要单独写一篇博客,都是源于朋友发的一张最近刚买的T恤照片,就是上面这张图.这是一个经 ...

  9. numpy的索引-【老鱼学numpy】

    简单的索引值 import numpy as np a = np.arange(3, 15).reshape(3, 4) print("a=") print(a) print(&q ...

  10. vue入门知识点

    最近入坑vue 做一点小的记录 有不对的 辛苦指出 会第一时间更改上新 0.利用vue-cli构建项目新建一个目标文件夹 ,全局安装vue-cli脚手架工具 (全局安装一次即可) npm instal ...