<!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. 利用using和try/finally语句来清理资源

    使用非托管资源的类型必须实现IDisposable接口的Dispose()方法来精确的释放系统资源..Net环境的这一规则使得释放资源代码的职责 是类型的使用者,而不是类型或系统.因此,任何时候你在使 ...

  2. springMvc参数传递的方法

    package cn.edu.hj.controller; import java.util.Map; import javax.servlet.http.HttpServletRequest; im ...

  3. PCANet: A Simple Deep Learning Baseline for Image Classification?--名词解释

    1 上采样与下采样 缩小图像(或称为下采样(subsampled)或降采样(downsampled))的主要目的有两个: 使得图像符合显示区域的大小 生成对应图像的缩略图 下采样原理:对于一幅图像I尺 ...

  4. Django之博客系统：自定义认证

    前面我们在登录的时候,是通过输入用户名和密码来进行认证 user=authenticate(username=cd['username'],password=cd['password']) 这个是通过 ...

  5. Binder学习笔记（二）——defaultServiceManager()返回了什么？

    不管是客户端还是服务端,头部都要先调用 sp < IServiceManager > sm = defaultServiceManager(); defaultServiceManager ...

  6. Js判断参数(String,Array,Object)是否为undefined或者值为空

    在一些前端控件要提交数据到服务器端的数据验证过程中,需要判断提交的数据是否为空.如果是普通表单的字符串数据,只需要在 trim 后判断 length 即可,而这里需要的数据可以是各种不同的类型,通过 ...

  7. [SinGuLaRiTy] NOIP膜你赛-Day 1

    [SinGuLRiTy-1022] Copyright (c) SinGuLaRITy 2017. All Rights Reserved.  对于所有题目:Time Limit:1s || Memo ...

  8. 函数声明后面的const用法

    void function() const{} 通常我们会看到一些函数声明后面会跟着一个const,这个const是做什么的呢? 看一下下面的例子,就知道了.直接在编译前,就会提示下面的两个错误 // ...

  9. [linux]阿里云主机的免密码登陆安全SSH配置与思考

    公司服务器使用的第三方云端服务,即阿里云,而本地需要经常去登录到服务器做相应的配置工作,鉴于此,每次登录都要使用密码是比较烦躁的,本着极速思想,我们需要配置我们的免登陆. 一 理论概述 SSH介绍 S ...

  10. UICollectionView Layout自定义 Layout布局

    from:   http://www.tuicool.com/articles/vuyIriN 当我们使用系统自带的UICollectionViewFlowLayout无法实现我们的布局时,我们就可以 ...