目的为了实现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. spark sql的简单操作

    测试数据 sparkStu.text zhangxs chenxy wangYr teacher wangx teacher sparksql { ,"job":"che ...

  2. 【数据结构】29、hashmap=》tableSizeFor 中求大于等于当前数的最小2的幂

    最近面试被问到hashmap的实现,因为前段时间刚好看过源码,显得有点信心满满,但是一顿操作下来的结论是基础不够扎实... 好吧,因为我开始看hashmap是想了解这到底是一个什么样的机制,具体有啥作 ...

  3. apache占用内存高解决办法

    我用512M的vps,访问量不大,但内存占用很大,甚至宕机. 我用top,然后shitf+m发现,httpd占用内存极大.经过网上找资料设置后,用过一段时间终于没再出现内存问题了. 首先查找配置文件的 ...

  4. 查看apache,nginx,mysql,linux,php版本

    查看apache版本 /usr/sbin/apachectl -v httpd -v 安装目录,使用apachectl -v mysql版本查看 mysql -V 查看linux版本 1.cat /e ...

  5. Cross Frame Script (跨框架脚本) 攻击

    一.Cross Frame Script (跨框架脚本) 攻击 什么是Cross Frame Script? 很简单,做个实验就知道了.把下面的这段HTML代码另存为一个html文件,然后用ie浏览器 ...

  6. 如何通过Git命令行把代码提交到github上

    1.http://www.cnblogs.com/leesf456/p/5169765.html   参考博客 背景:最近入手了mac,看见mac上的大神都是在用git命令行推代码,我很羡慕有木有,好 ...

  7. 图解堆算法、链表、栈与队列（Mark）

    原文地址: 图解堆算法.链表.栈与队列(多图预警) 堆(heap),是一类特殊的数据结构的统称.它通常被看作一棵树的数组对象.在队列中,调度程序反复提取队列中的第一个作业并运行,因为实际情况中某些时间 ...

  8. 洛谷P1073 最优贸易==codevs1173 最优贸易

    P1073 最优贸易 题目描述 C 国有 n 个大城市和 m 条道路,每条道路连接这 n 个城市中的某两个城市.任意两个 城市之间最多只有一条道路直接相连.这 m 条道路中有一部分为单向通行的道路,一 ...

  9. node.js实现国标GB28181流媒体点播（即实时预览）服务解决方案

    背景 28181协议全称为GB/T28181<安全防范视频监控联网系统信息传输.交换.控制技术要求>,是由公安部科技信息化局提出,由全国安全防范报警系统标准化技术委员会(SAC/TC100 ...

  10. python多任务处理

    多任务解析 什么叫“多任务”呢?简单地说,就是操作系统可以同时运行多个任务. 现在,多核CPU已经非常普及了,但是,即使过去的单核CPU,也可以执行 多任务.由于CPU执行代码都是顺序执行的,那么,单 ...