目的为了实现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. jar包解压与打包

    首先感谢大神的指导:https://blog.csdn.net/mr_pang/article/details/47028921 1.首先准备一个能运行的jar文件,我们使用第三方解压工具进行解压wi ...

  2. 计算机图形学（二）输出图元_6_OpenGL曲线函数_2_中点画圆算法

    中点画圆算法        如同光栅画线算法,我们在每一个步中以单位间隔取样并确定离指定圆近期的像素位置.对于给定半径r和屏幕中心(xc,yc),能够先使用算法计算圆心在坐标原点(0, 0)的圆的像素 ...

  3. AI关注的网址

    中科院计算技术研究所博士招生:http://admission.ucas.ac.cn/info/ZhaoshengDanweiDetail/9adf9e50-424b-44c8-b2dc-900ef9 ...

  4. ubuntu防火墙 ufw配置

    https://www.cnblogs.com/ylan2009/articles/2321136.html

  5. wamp 两个不同的php.ini

    最近在本地开发的windows wamp环境安装一个vld 扩展,碰见一个奇怪的问题,phpinfo() 有 而cli 命令模式里面却没有 最后发现wamp phpinfo()和cli命令模式指向的p ...

  6. 02 Memcache add详细介绍

    一:Memcached add 命令参数 ()add key flag expire length [增] key: 键名(起一个独立的名字) flag 标志,要求为一个正整数 备注:()当Memca ...

  7. Java多线程中的竞争条件、锁以及同步的概念

    竞争条件 1.竞争条件: 在java多线程中,当两个或以上的线程对同一个数据进行操作的时候,可能会产生“竞争条件”的现象.这种现象产生的根本原因是因为多个线程在对同一个数据进行操作,此时对该数据的操作 ...

  8. 本地虚拟机LNMP环境安装

      首先上传源码包到linux中(本人上传到根目录中),随意上传能找到即可 一.配置YUM源(如果已经配好就不许要重新配置) 挂载光驱要挂载到/mnt下  Mount /dev/cdrom /mnt ...

  9. php 前台post多维数组

    post多维数组时,在后台用$_POST接收不正常,应使用$_REQUEST

  10. ［Android Studio 权威教程］AS 中配置强大的版本号管理系统(Git、SVN、等)

    在Eclipse中加入Git等版本号管理工具须要自己加入插件.并且个人认为不咋好用,在AS中已经给我们集成好了,我们仅仅须要配置一下就OK了.今天就和大家聊聊怎么配置以及使用的要点. 1. 安装Git ...