目的为了实现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. 利用python 掌握机器学习的过程

    转载:http://python.jobbole.com/84326/ 偶然看到的这篇文章,觉得对我挺有引导作用的.特此跟大家分享一下. 为了理解和应用机器学习技术,你需要学习 Python 或者 R ...

  2. centos7 配置ssh 免密码登陆

    我只有一台机器,是因为要配置hadoop分布式环境用,需要配置ssh 两个用户: zhangxs, root 首先在切换到zhangxs用户下 执行[ ssh-keygen -t rsa] [zhan ...

  3. APPLE ID随意转区到US或者HK.不需要信用卡

    看到论坛有封釉想去US 或者HK 的商店下载大陆商店没有的APP.(比如 Tumblr) 但是现在在手机上或者是网页管理apple id 更改地区,需要输入付款信息. 现在教大家利用旧版的icloud ...

  4. Sql效能优化总结(续)- sql语句优化篇

    今晚继续进行Sql效能问题的分享,今天主要是一些具体的sql优化方法和思路分享,若看过后你也有其他想法,欢迎一起探讨,好了,进入今天的主题. 针对性地对一些耗资源严重的具体应用进行优化 出现效能问题时 ...

  5. 2013 年最好的 20 款免费 jQuery 插件

    2013 年最好的 20 款免费 jQuery 插件 oschina 发布于: 2014年01月11日 (8评) 分享到  新浪微博腾讯微博 收藏+99 互联网上面有很多 jQuery 插件,这里我们 ...

  6. 自动make工具--CMake

    http://www.cnblogs.com/lyq105/archive/2010/12/03/1895067.html http://www.linuxidc.com/Linux/2015-10/ ...

  7. simple_pool对象池——优化&lt;二&gt;

    本文章由cartzhang编写.转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/55051570 作者:car ...

  8. 【Mac】之svn上传/删除文件命令

    创建文件后,进入文件夹下: ①先checkoutsvn地址: svn checkout https://xxxx:0000/svn/CM_B2B_Document/06_Testing/B2B_Ste ...

  9. 关于html的小bug

    废话不说 看代码 因为最近比较忙  所以不闲聊了啊 <!DOCTYPE html> <html lang="en"> <head> <me ...

  10. iptables基础及samba配置举例

    iptable基本概念 iptables防火墙包含两部分,即位于用户空间的iptables模块和位于内核空间netfilter模块.用户空间模块提供插入.修改和除去包过滤表中规则,内核模块进行实际的过 ...