前段时间遇到一个效果处理,需要将table中超长的内容转换给….,原内容在鼠标hover时展示。目前css3提供一个属性ellipsis ,但是ellipsis对浏览器特别挑。所以用js写一个跨浏览器的ellipsis效果。
效果展示:
核心代码:
/* * @param tdSelector : td's selectror , if selector is null ,then all <td> tags will be add ellipsis's effect. */ function tableEllipsis(tdSelector){ var td = tdSelector; if(!td){ td = "td"; } $(td).each(function(){ if($(this).children().length == 0){ //td's content var text = $.trim($(this).text().replace(/\s+/g,"")); //add tds' title $(this).attr("title",text); //calcute tds' width var width = $(this).width(); //the developed width of <td> tag var strWidth = getStringWidth(text); //the developed width of <td>'s content var ellipsisWidth = getStringWidth("..............") //the developed width of "..............", NB: string "............" must has more than three ellipsis if(strWidth > width){ var offet = (strWidth-width + ellipsisWidth) / strWidth ; text = text.substring(0 , text.length * (1-offet))+"..."; } this.innerHTML = "<nobar>"+text+"</nobar>"; } }); } function getStringWidth(text){ var span = $("#tempStrWidth"); if(span.length == 0){ span = "<span id='tempStrWidth' style='z-index:-999;visibility:hidden;'>"+text+"</span>"; $("body").append(span); }else{ $("#tempStrWidth").html(text); } var result = $("#tempStrWidth").outerWidth(true); $("#tempStrWidth").html(""); return parseInt(result); }
调用方式:
<script type="text/javascript"> $(document).ready(function() { var tdSelector = "table[id='ellipsis'] td"; //add ellipsis to <td> tags tableEllipsis(tdSelector); }); </script>
相关推荐
JS组件Bootstrap Table使用方法详解 转载 2016年03月21日 15:06:09 标签: Bootstrap Table 最近客户提出需求,想将原有的管理系统,做下优化,通过手机也能很好展现,想到2个方案: a方案:保留原有的页面,新设计...
最后我用的方法是新建一个table,并把源tr克隆到新table中,然后通过对新table定位来实现效果。 用这个方法关键有两点,首先要做一个仿真度尽可能高的tr,还有是要准确的定位,这些请看后面的程序说明。 程序说明 ...
本文实例为大家分享了jQuery实现Table分页效果的具体代码,供大家参考,具体内容如下 CSS: <style> .pager { font-size: 18px; } .pagerTotal { font-size: 18px; height: 36px; line-height: 36px; ...
JS遍历Table的所有单元格内容思路是遍历Table的所有Row,遍历Row中的每一列,获取Table中单元格的内容 function GetInfoFromTable(tableid) { var tableInfo = ""; var tableObj = document.getElementById(table...
本文实例为大家分享了JavaScript实现table切换插件的封装代码,供大家参考,具体内容如下 效果图: HTML部分: <div class="box"> <div id="tabBox"> <ul> <li class="liStyle">A</li> <li>B</li> <li>C...
如果您调用的是<script language="javascript" src="/js/Std_StranJF.Js">,则将繁简互换JS文件(Std_StranJF.Js)上传至网站的js目录中。当然您也可以上传至网站的其他何地方,如根目录下。如果上传在网站根目录...
Table相同行的单元格自动合并,使用js来实现此效果,具体代码下,感兴趣的朋友可以参考下
本文实例为大家分享了JS实现前端分页效果的具体代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset='utf-8'> <script src="js/jquery.js"></script> ...
2.14.js 将函数作为参数传递。 2.15.html arguments参数的使用。 2.16.html apply方法与call方法的使用。 第3章(\c03) 示例描述:学习JavaScript的高级语法。 3.1.html 连接字符串。 3.2....
实现table表格checkbox复选框的全选 反选.
1、效果图 2、html代码 <table id=table></table> 3、javascript代码 $(#table).bootstrapTable({ dataType: json, method: 'get', contentType: application/x-www-form-urlencoded, cache: false, ...
因为经常拿网上的插件,感觉起来很多插件都是先做一部分 然后经过调试测试完善,看了下他们代码感觉自己也可以去尝试不同特效,与完善自己的特效版本,争取在新的一年里不在为js特效苦恼与忧愁。 既然身为程序员就不...
本文实例为大家分享了js实现添加删除表格的具体代码,供大家参考,具体内容如下 效果: 1、点击添加按钮 往table中添加一行 将全选前面的复选框变成false 1.1.当前新增的复选框加上点击事件 2、点击删除按钮 ...
可以用js控制默认状态下table-cell的宽度,并将这一列的table-cell设置为dispaly:block,这样多出来的内容就会被隐藏掉,添加点击事件,把table-cell的display在block和table-cell之间切换,就能实现点击展开隐藏...
在饿了么ui的框架中,输入数据el-form,输出数据el-table。有时候产品想让枯燥的表格来点动态的样式,比如不同的内容展示不同的样式,对于这个需求,其实方式有很多种,本文列举两种,以供参考。 效果图如下 ...
3.35 文本框显示网页中选中的内容 3.36 文字的垂直滚动 3.37 文字幻灯片 3.38 随机动态文字效果 3.39 实现textarea的自动滚动 3.40 使用marquee实现文字上下滚动 3.41 类似安装效果的textarea滚动 3.42 始终显示在最...
程序描述:本章将介绍 GWT应用中高级应用的部分,包括各中组件和布局、如何发送XMLHttpRequest请求,以及如何解决浏览器历史记录问题等等,同时读者还将详细的了解RPC应用的开发过程。 /xmlsample/AjaxSample....
很多人都有这种经历:当某个td中没有内容或者没有可见元素时,td的border也会消失。解决方案就是给table添加样式border-collapse:collapse 一般的文字截断(适用于内联与块): 复制代码代码如下: .text-overflow{ ...
3.35 文本框显示网页中选中的内容 3.36 文字的垂直滚动 3.37 文字幻灯片 3.38 随机动态文字效果 3.39 实现textarea的自动滚动 3.40 使用marquee实现文字上下滚动 3.41 类似安装效果的textarea滚动 3.42 始终显示在最...