描述:脚本内容实现,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)); }); } });
相关推荐
利用jquery实现表格动态分页,前台用jquery实现。后台用java实现动态查询数据,分页。
jQuery实现表格动态修改和隐藏jQuery实现表格动态修改和隐藏jQuery实现表格动态修改和隐藏
jquery实现表格排序,绝对实用。jquery实现表格排序,绝对实用。
如何使用jquery固定表格行列,固定table表头。
jquery日历表格行程安排事项_按钮控制日历表格每月行程安 jquery日历表格行程安排事项_按钮控制日历表格每月行程安
jQuery设置表格列字段筛选改变代码,jQuery设置表格列字段筛选改变代码(html)
动态控制表格 增加行、选中行、删除行 直运行
jQuery表格行展开隐藏代码是一款基于Bootstrap.js表格插件制作的table表格行展开收缩隐藏效果代码。
jQuery Table表格排序显示代码是一款支持分类排序,按数字大小排序,按英文排序等等。
代码片段: <th>Country <th>Population <th>Area <th>Official languages </thead>
jquery操作表格增加删除
jQuery树型表格jquery-treetable
jquery拖动的table表格的宽度隐藏表格中的内容
使用jQuery为表格添加合计行,方法依赖jQuery,方法中使用到的JQ是jQuery中的$方法的别名
NULL 博文链接:https://pigkiller.iteye.com/blog/769116
数据展示时候,经常从后台传入大小不等的矩阵。这里给出了根据不同矩阵大小,通过jquery的html()和append()方法动态生成html表格的实例。
jquery表格操作实例jquery表格操作实例jquery表格操作实例jquery表格操作实例
jquery导出表格插件jquery导出表格插件jquery导出表格插件
jquery插件--表格分页。
jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色jquery表格变色