<!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>

转载自：http://blog.csdn.net/zanychou/article/details/46988529

js 实现table每列可左右拖动改变列宽度 【转载】的更多相关文章

  1. [转] js 实现table每列可左右拖动改变列宽度

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

  2. vuejs中拖动改变元素宽度实现宽度自适应大小

    需求效果: 原理:拖动效果的实现基本都是dom操作来实现的,通过拖动分隔线,计算分隔线与浏览器边框的距离(left),来实现拖动之后的不同宽度的计算:当拖动分隔线1时,计算元素框left和mid:当拖 ...

  3. 任意表格(table)实现拖动列(column)改变列大小

    直接上代码吧,原理可以看我上一篇博文.本实现基于jquery,完美实现拖动改变表格的列大小功能,只需将代码放置在你页面的底部即可(jquery必须先引入). $(function () { var i ...

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

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

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

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

  6. [Js/Jquery]table行转列

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

  7. JS可改变列宽table

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

  8. js合并table指定列

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

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

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

随机推荐

  1. 2个域名重定向到https域名

    配置实例: [root@iZbp17q09o7e8pgg9dybd7Z conf.d]# cat company.confserver { listen 80; server_name www.yu* ...

  2. PyCharm安装Pygame方法

    最近在自学Python,然后终于到了项目实战的时候了,而且还是做一个游戏,热情直接被调动起来了,嘿嘿 首先要安装一个Pygame 环境 win7 先去 这里 下载对应Python的Pygame版本 如 ...

  3. 【ZOJ2760】How Many Shortest Path

    How Many Shortest Path 标签: 网络流 描述 Given a weighted directed graph, we define the shortest path as th ...

  4. 【JavaWeb】权限管理系统

    前言 前面我们做的小项目都是一个表的,业务代码也相对简单.现在我们来做一个权限管理系统,体验一下多表的业务逻辑,顺便巩固一下过滤器的知识.! 目的 现在我有一个管理商品.订单的页面.当用户点击某个超链 ...

  5. Java经典编程题50道之三十九

    写一个函数,求一个字符串的长度,在main函数中输入字符串,并输出其长度. public class Example39 {    public static void main(String[] a ...

  6. Log4j2配置文件详解

    目录[-] 1 系列目录 2 默认配置 3 第一个配置例子 4 复杂一点的配置 4.1 Appender之Syslog配置 4.2 Syslog及Syslog-ng相关配置(Fedora) 5 Log ...

  7. 阶乘之和 输入n，计算S＝1！＋2！＋3！＋…＋n！的末6位（不含前导0）。n≤10 6 ，n！表示 前n个正整数之积。

    阶乘之和输入n,计算S＝1!+2!+3!+…+n!的末6位(不含前导0).n≤10 6 ,n!表示前n个正整数之积.样例输入:10样例输出: package demo; import java.uti ...

  8. 【剑指offer】04替换空格，C++实现

    0.前言 # 替换空格为字符串部分的题目,剑指offer中字符串系列的文章地址,剑指offer全系列文章地址 1.题目 # 请实现一个函数,将一个字符串中的空格替换成"%20".例 ...

  9. PAT乙级 1034

    思路:是个水题,但是有坑.不能被题目忽悠了,题目保证正确的输出中没有超过整型范围的整数. 它只是保证结果不超出int,但是我们在运算过程中的乘法可能会超出int,直接把所有int改成long long ...

  10. HZAU 1199: Little Red Riding Hood 01背包

    题目链接:1199: Little Red Riding Hood 思路:dp(i)表示前i朵花能取得的最大价值,每一朵花有两种选择,摘与不摘,摘了第i朵花后第i-k到i+k的花全部枯萎,那么摘的话d ...