目的为了实现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. MapReduce小文件处理之CombineFileInputFormat实现

    在MapReduce使用过程中.一般会遇到输入文件特别小(几百KB.几十MB).而Hadoop默认会为每一个文件向yarn申请一个container启动map,container的启动关闭是很耗时的. ...

  2. instantclient_11_2 连接oracle数据

    (1)首先你要先下载instantclient (解压如下),修改你     instantclient/network/admin/tnsnames.ora 文件,将你oracle的服务器地址写上 ...

  3. MySQL_知识点

    1.执行顺序 语句模板: (8)SELECT (9)DISTINCT (11)<Top Num> <select list> (1)FROM [left_table] (3)& ...

  4. inside when() you don't call method on mock but on some other object

    错误原因:调用静态方法,要事先引入静态类,否则mock的时候会默认为测试的类 解决方法:@PrepareForTest({SecurityContextHolder.class})引入静态类 注:@P ...

  5. [译]GLUT教程 - 整合代码4

    Lighthouse3d.com >> GLUT Tutorial >> Pop-up Menus >> The Code So Far IV 以下代码使用了位图字 ...

  6. python学习 04 函数参数

    1.参数可以传递元组,但是要加* 2.参数可以传递字典,但是要加**

  7. ASP.NET动态网站制作（15）-- SQL数据库（1）

    前言:数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,用户可以对文件中的数据进行增.删.改.查.数据库有很多种类型,从简单的存储有各种数据的表格到能都进行海量数据存储的大型数据库 ...

  8. html5-框架网站

    1.html5+:http://www.html5plus.org/ 2.hbuilder:http://www.dcloud.io/ 3.mui:http://dev.dcloud.net.cn/m ...

  9. PHP-Manual的学习----【入门指引】

    2017年6月27日17:03:53 笔记:简介    PHP是什么?    PHP能做什么?1.PHP("PHP: Hypertext Preprocessor",超文本预处理器 ...

  10. 旋转卡壳求两个凸包最近距离poj3608

    #include <iostream> #include <cmath> #include <vector> #include <string.h> # ...