目的为了实现td表格元素出现省略的情况，然后点击中间位置是td的宽度增加。

实现代码如下，采用css+jquery的实现方式：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<style type="text/css">

    div{

        border: 1px solid #000000;

        position: absolute;

        width:800px;

        height: 300px;

        overflow: scroll;

    }

    table{

        border: 1px double #000000;

        /*消除表格之间的间距*/

        border-collapse: collapse;

    }

    td{

        border-top: 1px double #000000;

        border-right: 1px double #000000;

        /*text-align: center;*/

        /*必须存在最大的宽度否则td里的信息不会缩略显示*/

        max-width: 50px;

        /*规定段落中的文本不进行换行*/

        white-space: nowrap;

        /*内容过多的隐藏*/

        overflow: hidden;

        /*溢出的文字显示为省略号*/

        text-overflow: ellipsis;

        /*消除表格之间的间距*/

        /*border-collapse: collapse;*/

        background: linear-gradient(#cafce7,#ffffff);

        background:-moz-linear-gradient(top,#cafce7,#ffffff);

        background:-webkit-linear-gradient(top,#cafce7,#ffffff);

    }

</style>

<script src="js/jquery.js" type="text/javascript"></script>

<script type="text/javascript">

//    var colors=["red","rosybrown","rebeccapurple","black","blue"]

//    $(function () {

//

//

//

//        function  addDiv(color) {

//            for(var i=0;i<3;i++){

//

//                $("body").append($("<div id=\"l"+i+"\""+"></div>").css({"margin-left":200+i*30,"margin-top":100-i*10,"background-color":color[i],"z-index":7-i,"width":50-i*10,"height":80-i*16}));

//                $("body").append($("<div id=\"r"+i+"\""+"></div>").css({"margin-left":200-i*30,"margin-top":100-i*10,"background-color":color[color.length-i],"z-index":7-i,"width":50-i*10,"height":80-i*16}));

//            }

//        }

//        function  selColor() {

//            var tcolors=new Array();

//            var j=0;

//            for(var i=0;i<colors.length;i++){

//                j=i+1;

//                if(j==colors.length){

//                    tcolors[i]=colors[0];

//                }else{

//                tcolors[i]=colors[j];

//                }

//            }

//            colors=tcolors;

//            addDiv(tcolors);

//        }

//        $("body").append($("<button>Next</button>").bind("click",function () {

//            selColor();

//        }));

//

//    });

    $(function () {

//        鼠标的点击事件

        $("td").mousedown(function(e) {

            //$(this).offset().left元素相对body容器的绝对定位的位置

            //元素绝对的margin-left位置

            var tleft=$(this).offset().left;

            //鼠标的点击位置

            var epagex=e.pageX;

            //点击元素的宽度

            var twidth=$(this).width();

            //获取元素x坐标的结束位置

            var total=tleft+twidth;

            //将触发事件压缩到一个局部的位置

            if(total-20<epagex){

                //将鼠标设置为左右拉伸

                $(this).css("cursor","e-resize");

                //列的长度每次点击添加50px

                $(this).css("width",twidth+50);

                $(this).css("max-width",twidth+50);

                //添加上这一句就可以无限增加td列的长度

                $("table").css("width",$("table").width()+50);

            }else {

                //将鼠标还原到小箭头

                $(this).css("cursor","default");

            }

        });

    });

</script>

<body>

<table>

    <tr>

        <td>12132342432435435</td>

        <td>dsfsfsdfds</td>

    </tr>

    <tr>

        <td>12132342432435435</td>

        <td>dsfsfsdfds</td>

    </tr>

</table>

</body>

</html>

效果图：

点击表格中间的位置，表格宽度增加

jquery实现td控制显示宽度的更多相关文章

  1. jquery通过ajax获取数据，控制显示的数据条数

    效果图: 现在我们可以先看它的json数据,如图所示:                然后可以对应我们的代码进行理解. jquery通过ajax获取数据,并通过窗口大小控制显示的数据条数,以及可以根据 ...

  2. jquery里面控制显示和隐藏 ___土狗toggle

    $("#hide").click(function(){ $("p").hide(); }); $("#show").click(funct ...

  3. CSS 相对/绝对(relative/absolute)定位与jQuery的控制显示隐藏

    曾经写显示隐藏老是用jq方法控制: dom.show(); dom.hide(); 事实上这样还是有非常多缺陷的. 这是html结构: <div class="holi"&g ...

  4. 基于MVC4+EasyUI的Web开发框架经验总结（1）-利用jQuery Tags Input 插件显示选择记录

    最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重 ...

  5. jquery实现密码框显示提示文字

    jquery实现密码框提示文字的功能. 代码:    <html>  <head>   3 <title>登录-jquery实现密码框显示文字-www.jbxue. ...

  6. 使用jQuery动态改变图片显示大小

    当我们要显示后台传过来若干个尺寸不一的图片时,为了保证图片大小的一致性及比例的协调,需要动态改变图片显示尺寸.通过搜索,我们可以从网上找到实现此 功能的jQuery代码如下.这段代码可以使图片的大小保 ...

  7. js进阶 13-1 jquery动画中的显示隐藏函数有哪些

    js进阶 13-1 jquery动画中的显示隐藏函数有哪些 一.总结 一句话总结:show(),hide(),toggle(),这三个. 1.jquery动画中显示隐藏效果函数有哪些? show()h ...

  8. Js控制显示、隐藏文本框中的密码

    Js控制显示.隐藏文本框中的密码,也可称为是一款小型的JavaScript星号密码破解器,点击会显示出密码类型的文本框中的真实信息,再次点击则还原,程序 主要是获取HTML元素对象,然后强制更改元素属 ...

  9. 让dwz 在td里显示图片

    让dwz 在td里显示图片 <!@{foreach from = $list item = element}@> <tr target="gid" rel=&qu ...

随机推荐

  1. Atitit.跨语言系统服务管理器api兼容设计

    Atitit.跨语言系统服务管理器api兼容设计 1. Common api,兼容sc ,service control??1 1.1. 服务创建,use sc1 1.2. 服务delete ,use ...

  2. 还在用系统自带的？那你那就OUT了！

    相信如今的APP10个里面有九个是有Tabbar的,可是非常多人甚是非常多公司都在用系统自带的tabbar.当然这也不是不能够,并且项目中就那几行代码.效果又一样. 可是,别忘了另一个可是.然并卵.这 ...

  3. 卸载Linux自带openjdk

    1.查看自带jdk版本   java -version 2.查看   rpm  -qa | grep java 显示如下信息: java-1.4.2-gcj-compat-1.4.2.0-40jpp. ...

  4. centos6下手工编译vitess

    vitess是youtub开源的一款mysql代理,在ubuntu下编译非常方便.可是在centos下且不能訪问google的情况下坑比較多.近期依据其bootstrap.sh脚本手工编译成功.把过程 ...

  5. JavaWeb学习总结第六篇--认识Session机制

    认识Session机制 前文也提到过,常用的会话跟踪有两种技术:Cookie和Session.今天就为大家讲解一下Session机制. 什么是Session? Session是另一种记录客户状态的机制 ...

  6. 编程算法 - 二叉树的最低公共祖先 代码(C)

    二叉树的最低公共祖先 代码(C) 本文地址: http://blog.csdn.net/caroline_wendy 二叉树的最低公共祖先(lowest common ancestor), 首先先序遍 ...

  7. sublime text 3 语法检查插件

    第一种方法:有点卡 先去下载对应的开发环境,安装到本地,例如php. 从Pakage Control中安装sublimelinter和sublimelinter-*,*为所用的语言,例如sublime ...

  8. Ubuntu中安装FTP 服务器自己踩得坑

    12点多了,擦!做个码农真不容易呀! 系统:Ubuntu16.04 安装:FTP 步骤: 1.不管有没有一上来我先卸载: sudo apt-get purge vsftpd 2.再安装:sudo ap ...

  9. Orthogonal Least Squares Learning Algorithm for Radial Basis Function Networks

    Orthogonal Least Squares Learning Algorithm for Radial Basis Function Networks S. Chen, C. F. N. Cow ...

  10. 2017-2018-1 20179209《Linux内核原理与分析》第九周作业

    理解进程调度时机 进程调度时机 中断处理过程(包括时钟中断.I/O中断.系统调用和异常)中,直接调用schedule(),或者返回用户态时根据need_resched标记调用schedule(): 内 ...