jquery控制表格隐藏多余字符

 

描述：脚本内容实现，tr单元格由于文本内容过宽影响整体样式问题。

效果：自定义宽度，单元格超出字符显示省略号，并且鼠标双击可复制全部内容(原文本不包含省略号)鼠标移动到省略文本的单元格上方，显示全部文本内容的浮动框，从而不影响文本的正常浏览。

 

使用：脚本需要jquery支持，请先引入jquery文件，在需要控制宽度的tr中设置属性class="ellipsis" 并指定"width"宽度属性（不指定宽度则根据js中widthDef的默认设置）

页面参考源码：  

<td class="ellipsis" width="105px">${name}</td>

 

页面效果:

<td class="ellipsis" title="Sky Gamblers: Storm Raiders">

    <div style="width: 105px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; ">Sky Gamblers: Storm Raiders</div>

</td>

 

 

 

$(function(){
// 查找TD下指定class="ellipsis"属性添加标签样式自动隐藏超出框度的字符

        // 查找表格中tr属性是否包含ellipsis的class
	if($("tr .ellipsis").length>0){
                // 遍历找到对象进行操作
		$("tr .ellipsis").each(function() {
                        // 设置默认宽度
			var widthDef = "105px";
                        // 由于tr标签不支持隐藏属性设置所以创建DIV来完成预期效果
			var div = document.createElement("div");
			// 获取表格文本内容
			var txt = $(this).html();
			// 设置提示文本(当鼠标移动到所在TD的单元格有浮动文本框提示完整的文本内容)
			$(this).attr("title",txt);
			// 指定宽度(获取TR的宽度实现不同单元格的自定义宽度，如果未设置则默认15%)
			if(typeof($(this).attr("width")) != "undefined"){
				widthDef = $(this).attr("width");
			}
                        // 动态创建隐藏超出宽度的样式
			$(div).css({"width":widthDef,"overflow":"hidden","text-overflow":"ellipsis","white-space":"nowrap"});
                        // 将动态生成带样式的DIV放回原来的标签中
			$(this).html($(div).html(txt));
		});
	}
});

 

 

评论

1 楼 coral0212 2013-12-04  

感谢大神,测试用过很爽