`
mark_5528
  • 浏览: 63397 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js效果,将table中多余的内容转成...

阅读更多

    前段时间遇到一个效果处理,需要将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>

 
 
 

  • 大小: 15.7 KB
分享到:
评论

相关推荐

    jquery.table2excel.js.zip

    jQuery.table2excel.js是一款轻量级的jQuery插件,它实现了这一功能,允许用户将网页中的HTML表格便捷地导出为Excel文件。 ### jQuery.table2excel.js的工作原理 该插件的核心是利用浏览器的Blob对象和Data URL...

    ScrollableTable.js

    `ScrollableTable.js` 是一个专为解决这一问题而设计的JavaScript库,它允许用户在保持横向内容完整的同时,滚动查看纵向的表格数据。本文将详细介绍`ScrollableTable.js`的工作原理、使用方法以及其局限性。 首先...

    bootstrap-table-fixed-columns.zip

    `bootstrap-table-fixed-columns` 插件的工作原理是通过 JavaScript 和 CSS 实现表格的固定列效果。它会将表格的表头和内容部分分离,并在需要时添加额外的样式和布局,确保表头在滚动时始终保持可见。在实际应用中...

    jquery.table.rowspan.js 表格自动合并单元格插件

    要使用这个插件,首先确保引入了jQuery库,然后将`jquery.table.rowspan.js`文件添加到页面中。接着,选择需要应用插件的表格元素,并调用`.tableRowspan()`方法。例如: ```html &lt;script src="jquery.min.js"&gt; ...

    bootstrap-table-fixed-columns.js

    要使用`bootstrap-table-fixed-columns.js`,首先你需要在项目中引入Bootstrap框架的CSS和JS文件,以及`bootstrap-table`主库和`bootstrap-table-fixed-columns.js`扩展文件。然后,你需要在HTML中定义一个表格元素...

    js实现漂亮的table表格

    本教程将详细介绍如何利用JavaScript (JS) 和 Cascading Style Sheets (CSS) 技术来创建一个漂亮且实用的table表格。 **一、HTML基础表格结构** 首先,我们需要在HTML文档中创建基本的表格结构。一个简单的表格由`...

    JS弹出基于Table的可关闭浮动层.rar

    在网页开发中,JavaScript(JS)是一种至关重要的脚本语言,它被广泛用于实现动态交互效果。本资源“JS弹出基于Table的可关闭浮动层.rar”提供了一个使用JavaScript实现的功能,即创建一个基于HTML表格(Table)的可...

    EasyTable.js插件1.0

    EasyTable.js插件1.0是一款专为HTML页面前端表格布局设计的JavaScript工具,它旨在简化和优化网页中表格的创建和管理。在HTML中,表格的构建通常涉及大量繁琐的HTML标记,而EasyTable.js则通过提供简洁的API,使得...

    【JavaScript源代码】element table多层嵌套显示的实践.docx

    在JavaScript编程中,Element UI库是一个非常流行的前端组件库,用于构建美观且功能丰富的用户界面。在本案例中,我们探讨的是如何使用Element UI的`el-table`组件实现多层嵌套显示的功能,这对于处理复杂的数据展示...

    将table转换成div+css

    "将table转换成div+css"这个主题正是针对这一转变,旨在优化网页性能,提升用户体验。下面将详细探讨这一转换过程中的关键知识点。 1. **表格(table)与CSS布局的差异** - 表格布局:HTML表格是为数据展示而设计...

    bootstrap-table-fixed-columns(css,js)

    `bootstrap-table-fixed-columns.js`则是JavaScript文件,它是扩展的核心,负责实现动态冻结列的逻辑。JavaScript是一种广泛使用的客户端脚本语言,用于增加网页的交互性。在这个文件中,开发者可能会找到对表格元素...

    table转excell插件.zip

    "table转excel插件.zip"就是这样一个工具,它提供了一个便捷的方法,允许用户将网页上的HTML表格内容转化为标准的Excel格式,方便进一步处理。 首先,我们要理解HTML表格的基本结构。HTML表格由`&lt;table&gt;`元素定义,...

    JavaScript Table行定位效果

    在JavaScript编程领域,实现"Table行定位效果"是一项常见的需求,尤其在网页设计和数据展示中。这个主题主要关注如何通过JavaScript技术使表格中的特定行在用户滚动页面时始终保持可见,这种效果通常被称为"固定表头...

    JS代码实现table数据分页效果

    本文将详细介绍如何使用JavaScript(JS)来实现表格(table)数据的分页效果,分为两个部分进行讲解。 ### 第一部分:简单分页 这个部分主要实现的是基础的页数翻页功能。首先,我们需要一个包含表格数据的HTML...

    bootstrap冻结表头所需css与js.rar

    在使用这两个文件时,你需要先引入Bootstrap的基本样式库和JavaScript库,然后将`bootstrap-table-fixed-header.js`和`bootstrap-table-fixed-header.css`添加到你的HTML文件中。接着,为你的表格添加必要的类名...

    JS组件Bootstrap Table使用方法详解

    JS组件Bootstrap Table使用方法详解 转载 2016年03月21日 15:06:09 标签: Bootstrap Table 最近客户提出需求,想将原有的管理系统,做下优化,通过手机也能很好展现,想到2个方案: a方案:保留原有的页面,新设计...

    jquery.table2excel

    jQuery.table2excel.js是一款轻量级的JavaScript插件,它允许用户方便地将HTML表格内容导出为Excel文件,大大提升了用户的数据管理效率。本文将深入探讨jQuery.table2excel的工作原理、使用方法及其在实际项目中的...

    前台js将table转为Excel表格下载

    本文将详细讲解如何使用JavaScript实现这一功能,主要基于提供的资源,特别是"前台js将table转为Excel表格下载"这个主题。 首先,我们要理解JavaScript(简称js)是一种在客户端运行的脚本语言,它可以与HTML和CSS...

    jQuery fixed-table.js锁定表头Table插件特效代码.zip

    4. **性能优化**:虽然fixed-table.js通过JavaScript实现,但其性能优化良好,即使在大数据量的表格中也能保持流畅。 5. **API接口**:插件提供了API方法,如`refresh`用于重新计算表头的位置,`destroy`用于移除...

    css+js+table效果代码

    在网页设计中,表格(Table)常用于数据展示,而CSS(层叠样式表)和JavaScript(JS)则能为表格增添动态效果和用户交互性。 **CSS(层叠样式表)**在网页设计中起到美化和布局的作用。对于表格,CSS可以用来改变...

Global site tag (gtag.js) - Google Analytics