前段时间遇到一个效果处理,需要将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>
相关推荐
jQuery.table2excel.js是一款轻量级的jQuery插件,它实现了这一功能,允许用户将网页中的HTML表格便捷地导出为Excel文件。 ### jQuery.table2excel.js的工作原理 该插件的核心是利用浏览器的Blob对象和Data URL...
`ScrollableTable.js` 是一个专为解决这一问题而设计的JavaScript库,它允许用户在保持横向内容完整的同时,滚动查看纵向的表格数据。本文将详细介绍`ScrollableTable.js`的工作原理、使用方法以及其局限性。 首先...
`bootstrap-table-fixed-columns` 插件的工作原理是通过 JavaScript 和 CSS 实现表格的固定列效果。它会将表格的表头和内容部分分离,并在需要时添加额外的样式和布局,确保表头在滚动时始终保持可见。在实际应用中...
要使用这个插件,首先确保引入了jQuery库,然后将`jquery.table.rowspan.js`文件添加到页面中。接着,选择需要应用插件的表格元素,并调用`.tableRowspan()`方法。例如: ```html <script src="jquery.min.js"> ...
要使用`bootstrap-table-fixed-columns.js`,首先你需要在项目中引入Bootstrap框架的CSS和JS文件,以及`bootstrap-table`主库和`bootstrap-table-fixed-columns.js`扩展文件。然后,你需要在HTML中定义一个表格元素...
本教程将详细介绍如何利用JavaScript (JS) 和 Cascading Style Sheets (CSS) 技术来创建一个漂亮且实用的table表格。 **一、HTML基础表格结构** 首先,我们需要在HTML文档中创建基本的表格结构。一个简单的表格由`...
在网页开发中,JavaScript(JS)是一种至关重要的脚本语言,它被广泛用于实现动态交互效果。本资源“JS弹出基于Table的可关闭浮动层.rar”提供了一个使用JavaScript实现的功能,即创建一个基于HTML表格(Table)的可...
EasyTable.js插件1.0是一款专为HTML页面前端表格布局设计的JavaScript工具,它旨在简化和优化网页中表格的创建和管理。在HTML中,表格的构建通常涉及大量繁琐的HTML标记,而EasyTable.js则通过提供简洁的API,使得...
在JavaScript编程中,Element UI库是一个非常流行的前端组件库,用于构建美观且功能丰富的用户界面。在本案例中,我们探讨的是如何使用Element UI的`el-table`组件实现多层嵌套显示的功能,这对于处理复杂的数据展示...
"将table转换成div+css"这个主题正是针对这一转变,旨在优化网页性能,提升用户体验。下面将详细探讨这一转换过程中的关键知识点。 1. **表格(table)与CSS布局的差异** - 表格布局:HTML表格是为数据展示而设计...
`bootstrap-table-fixed-columns.js`则是JavaScript文件,它是扩展的核心,负责实现动态冻结列的逻辑。JavaScript是一种广泛使用的客户端脚本语言,用于增加网页的交互性。在这个文件中,开发者可能会找到对表格元素...
"table转excel插件.zip"就是这样一个工具,它提供了一个便捷的方法,允许用户将网页上的HTML表格内容转化为标准的Excel格式,方便进一步处理。 首先,我们要理解HTML表格的基本结构。HTML表格由`<table>`元素定义,...
在JavaScript编程领域,实现"Table行定位效果"是一项常见的需求,尤其在网页设计和数据展示中。这个主题主要关注如何通过JavaScript技术使表格中的特定行在用户滚动页面时始终保持可见,这种效果通常被称为"固定表头...
本文将详细介绍如何使用JavaScript(JS)来实现表格(table)数据的分页效果,分为两个部分进行讲解。 ### 第一部分:简单分页 这个部分主要实现的是基础的页数翻页功能。首先,我们需要一个包含表格数据的HTML...
在使用这两个文件时,你需要先引入Bootstrap的基本样式库和JavaScript库,然后将`bootstrap-table-fixed-header.js`和`bootstrap-table-fixed-header.css`添加到你的HTML文件中。接着,为你的表格添加必要的类名...
JS组件Bootstrap Table使用方法详解 转载 2016年03月21日 15:06:09 标签: Bootstrap Table 最近客户提出需求,想将原有的管理系统,做下优化,通过手机也能很好展现,想到2个方案: a方案:保留原有的页面,新设计...
jQuery.table2excel.js是一款轻量级的JavaScript插件,它允许用户方便地将HTML表格内容导出为Excel文件,大大提升了用户的数据管理效率。本文将深入探讨jQuery.table2excel的工作原理、使用方法及其在实际项目中的...
本文将详细讲解如何使用JavaScript实现这一功能,主要基于提供的资源,特别是"前台js将table转为Excel表格下载"这个主题。 首先,我们要理解JavaScript(简称js)是一种在客户端运行的脚本语言,它可以与HTML和CSS...
4. **性能优化**:虽然fixed-table.js通过JavaScript实现,但其性能优化良好,即使在大数据量的表格中也能保持流畅。 5. **API接口**:插件提供了API方法,如`refresh`用于重新计算表头的位置,`destroy`用于移除...
在网页设计中,表格(Table)常用于数据展示,而CSS(层叠样式表)和JavaScript(JS)则能为表格增添动态效果和用户交互性。 **CSS(层叠样式表)**在网页设计中起到美化和布局的作用。对于表格,CSS可以用来改变...