目的为了实现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. js中box和box（）的区别

    window.onload = function(){ var input = document.getElementByTagName('input')[0]; input.onclick = bo ...

  2. Thread 常搞混的几个概念sleep、wait、yield、interrupt

    sleep:在指定的毫秒数内让当前正在执行的线程休眠(暂停执行),此操作受到系统计时器和调度程序精度和准确性的影响.该线程不丢失任何监视器的所属权. 通过调用sleep使任务进入休眠状态,在这种情况下 ...

  3. HTML5 2D平台游戏开发#8指令技

    一般在动作游戏中,玩家可以通过对输入设备输入一系列的指令让角色完成某个或多个特定的动作.以格斗游戏<拳皇>为例,键入↓↘→↘↓↙← + A or C可以触发IORI的必杀技八稚女: 通过一 ...

  4. 谨慎使用ArrayList中的subList方法

    转自:https://www.toutiao.com/a6705958780460335619/?tt_from=weixin&utm_campaign=client_share&wx ...

  5. Android中的常见通信机制和Linux中的通信机制

    Handler Handler是Android系统中的一种消息传递机制,起作用是应对多线程场景.将A进程的消息传递给B线程,实现异步消息处理.很多情况是将工作线程中需要更新UI的操作消息传递给UI主线 ...

  6. java getResourcesAsStream()如何获取WEB-INF下的文件流

    getResourcesAsStream()来读取.properties文件,但是getResourcesAsStream()仅在java项目时能获取根目录的文件: 在web项目中,getResour ...

  7. Linux 安装OpenSSL出错的解决方法

    以前编译php没有 –with–openssl 现在要使用到 openssl ,phpinze扩展安装,但是在make时候报错 今天找这个在网上找了大半天,最后总结应该是php版本本身的问题,错误是p ...

  8. iOS CLLocationManager定位

    本文转载至 http://www.tuicool.com/articles/7JBRZn 在iOS8以前的版本中,我们使用CLLocationManager定位是没有问题的,最近在iOS8系统中却无法 ...

  9. 【BZOJ4128】Matrix BSGS+hash

    [BZOJ4128]Matrix Description 给定矩阵A,B和模数p,求最小的x满足 A^x = B (mod p) Input 第一行两个整数n和p,表示矩阵的阶和模数,接下来一个n * ...

  10. java servlet中上传文件的简单实现（基于第三方jar）

    这里的案例使用了两种文件上传的组件.分别介绍 1.使用JSPSmartUpload完成上传 package test_servlet_package; import java.io.File; imp ...