<!DOCTYPE HTML>  
<html>  
<head>  
<meta charset="gbk">  
<title>table</title>  
</head>  
<body>  
<table id="tb_1" 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_1");  
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>ta ...

  2. js实现table内 某列的内容进行即时筛选

    往往有些时候,我们把数据从数据库读取出来,显示到table里面,而此时来了个新需求,要在一个搜索框内输入关键字,表格的内容进行即时的筛选. 而即时触发进行数据库的查询,再回调显示,就显得慢,拖累服务器 ...

  3. 【2017-06-29】在登录页面自动返回上次请求页面、Js获取table中的行数与列数

    一.在登录页面自动返回上次请求页面 Request.UrlReferrer比如 if (Request.UrlReferrer != null) { //如果能获取来路地址 Response.Redi ...

  4. [Js/Jquery]table行转列

    摘要 在使用ews调用exhange的收件箱的并在h5页面显示邮件详情的时候,因为返回的每封邮件的内容都是htmlbody,没有textbody.每封邮件又没什么规律,用正则表达式来匹配内容并不合适, ...

  5. JS可改变列宽table

    <!DOCTYPE HTML> <html> <head> <meta charset="gbk"> <title>ta ...

  6. js合并table指定列

    function MergeTableCell(tableId, startRow, endRow, col) { var tb = document.getElementById(tableId); ...

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

    <!DOCTYPE html> <html> <head> <meta charset="gbk"> <title>ta ...

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

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

  9. 纯JS 将table表格导出到excel

    html <div > <button type="button" onclick="getXlsFromTbl('tableExcel','myDiv ...

随机推荐

  1. 关于集合的小demo

    /*1.分析以下需求,并用代码实现: (1)有如下代码: (2)定义方法统计集合中指定元素出现的次数,如"e" 3,"f" 2,"g" 4* ...

  2. Spring学习大纲

    1.BeanFactory 和 FactoryBean? 2.Spring IOC 的理解,其初始化过程? 3.BeanFactory 和 ApplicationContext? 4.Spring B ...

  3. Markdown语法简介 | Markdown Tutorial

    Markdown是一种轻量级标记语言,允许人们使用易读易写的纯文本格式编写文档,然后转换成有效的HTML文档. 与Word相比,使用Markdown最大的好处是可以使人们将注意力集中与文字本身而非排版 ...

  4. 《Linux内核设计与实现》读书笔记（九）- 内核同步介绍

    存在共享资源(共享一个文件,一块内存等等)的时候,为了防止并发访问时共享资源的数据不一致,引入了同步机制. 主要内容: 同步的概念 同步的方法-加锁 死锁 锁的粒度 1. 同步的概念 了解同步之前,先 ...

  5. 调试.NET CORE代码

    前言 core也用了很长一段时间了,发现很多小伙伴不知道如何调试core的代码. 可想而知,以前使用mvc的时候,不需要发布代码,直接iis地址指向项目源码,然后附加到进程w3wp.exe就可以调试了 ...

  6. json解析（自动判断是jsonArray和jsonObject）

    因为想做一个接口自动化框架,已经实现了接口的访问和连接及获取接口返回的json数据,但json数据的解析是个麻烦的事情,所以写一个简单的版本记录一下.后续会进行优化,实现方法分离以及自动识别循环解析返 ...

  7. 10.20 olinr

    感谢olinr提供md文件 免得我整理格式了 1.求助 (help.cpp/c/pas) [问题背景] 马上就要noip了,lrt同志\(\displaystyle\begin{vmatrix}\te ...

  8. CF796C Bank Hacking 思维

    Although Inzane successfully found his beloved bone, Zane, his owner, has yet to return. To search f ...

  9. Number BZOJ3275 最大流

    有N个正整数,需要从中选出一些数,使这些数的和最大. 若两个数a,b同时满足以下条件,则a,b不能同时被选 1:存在正整数C,使a*a+b*b=c*c 2:gcd(a,b)=1 Sample Outp ...

  10. csv HTTP简单表服务器

    HTTP Simple Table Server Download Performance testing with JMeter can be done with several JMeter in ...