<!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. python--爬虫基础

    http://files.cnblogs.com/files/Kobe10/Python__%E7%88%AC%E8%99%AB%E5%9F%BA%E7%A1%80.pdf

  2. [译]内联Javascript vs 外置Javascript

    本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...

  3. Docker+Jenkins+Gogs 自动构建.Net Core

    Docker+Jenkins+Gogs 自动构建.Net Core 引言 jenkins+gags 全部采用Docker安装,通过jenkins插件ssh调用外部Docker构建 主要实现功能: gi ...

  4. fopen_s()

    原型:errno_t  fopen_s( FILE** pFile, const char *filename, const char *mode );   例子: char *filePath=&q ...

  5. git rm 与 git reset

    https://www.cnblogs.com/sunshine-xin/articles/3521481.html 1. git rm --cached file will remove the f ...

  6. （原创）BZOJ 2038 小Z的袜子(hose) 莫队入门题+分块

    I - 小Z的袜子(hose) 作为一个生活散漫的人,小Z每天早上都要耗费很久从一堆五颜六色的袜子中找出一双来穿.终于有一天,小Z再也无法忍受这恼人的找袜子过程,于是他决定听天由命…… 具体来说,小Z ...

  7. loj #2044. 「CQOI2016」手机号码

    #2044. 「CQOI2016」手机号码 内存限制:256 MiB时间限制:1000 ms标准输入输出 题目类型:传统评测方式:文本比较 上传者: 匿名 提交提交记录统计讨论测试数据   题目描述 ...

  8. web安全问题-csrf

    web安全问题 csrf <script> document.write(` <form name="commentForm" target="csrf ...

  9. poj3321（dfs序+树状数组）

    题目链接:https://vjudge.net/problem/POJ-3321 题意:给一个普通树(不是二叉树),并且已经编号,每个结点为1或0,有两种操作,对单个结点修改和查询一个结点的子树的所有 ...

  10. mybatis 遍历字段和字段对应的值循环插入

    java代码: /** * 插入单条数据 * @param request * @param response * @param id * @param str * @return * @throws ...