`
whmjxa
  • 浏览: 16118 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

jquery控制表格的行高和列数

阅读更多
$(document).ready(
	function() {
		var array = $(".tableCell span");
		for ( var i = 0; i < array.length; i++) {
			var height = array[i].offsetHeight;
			if (height > 65) {
				var content = array[i].innerHTML;
				var width = array[i].offsetWidth;
				if (content.length > (4 * 15 * width / 100 - 3)) {
					array[i].innerHTML = content.substring(0, 4 * 15
							* width / 100 - 3) + '...';
				}

				content = content.replace(/&lt;/g, "<");
				content = content.replace(/&gt;/g, ">");
				content = content.replace(/&amp;/g, "&");
				array[i].setAttribute("title", content);
			}
		}
		hideColumn();
	});

function hideColumn() {
	var array = $(".gridTable tr");
	for ( var i = 0; i < array.length; i++) {
		var td = array.eq(i).children("td");
		for ( var j = 0; j < td.length; j++) {
			if (j > 6) {
				td[j].style.display = "none";
			}
		}
	}
	$("#showButton").show();
	$("#hideButton").hide();
}
function showColumn() {
	var array = $(".gridTable tr");
	for ( var i = 0; i < array.length; i++) {
		var td = array.eq(i).children("td");
		for ( var j = 0; j < td.length; j++) {
			if (j > 6) {
				td[j].style.display = "";
			}
		}
	}
	$("#showButton").hide();
	$("#hideButton").show();
}

 最近公司正好有这方面的需求,所以用jquery写了一下,以上代码控制表格列数在7列,超过7列的隐藏起来,当触发showColumn()方法时才全部列出来,另外每个单元格高度控制在4行(这个不是很精确,因为换行是按分词来换的),超过的部分截掉以...表示,当鼠标移过时显示该单元格的全部信息。

代码在ie8和firefox5下测试通过

分享到:
评论

相关推荐

    jQuery仿Excel表格列表排序代码

    **jQuery仿Excel表格列表排序代码**是一种在网页中实现类似Excel表格功能的技术,它允许用户对数据进行排序、检索和筛选,提供了丰富的交互体验。在Web开发中,jQuery库因其简洁的API和强大的功能而被广泛应用,对于...

    jquery实现类Excel表格

    5. **列宽和行高调整**:用户可以自由调整列宽和行高,使得表格布局更加灵活。 6. **拖放功能**:支持列拖动,可以调整列的顺序,也可以通过拖放添加、删除行。 7. **复制和粘贴**:兼容Excel的复制和粘贴操作,...

    jquery-handsontable-master

    5. **API与事件**:强大的API接口和丰富的事件系统,允许开发者对Handsontable进行深度控制和扩展。 三、jQuery集成 在jQuery项目中整合Handsontable,首先需要引入jQuery库和Handsontable的CSS及JS文件。接着,...

    代码调整表格.zip

    《代码调整表格.zip》是一个包含JS特效的资源包,主要用于实现对表格列宽和行高的动态调整功能。在网页开发中,特别是在数据展示时,用户可能需要根据自己的需求来定制表格的显示效果,例如调整列宽以适应不同长度的...

    前端项目-jquery-handsontable.zip

    总结来说,jQuery Handsontable是一个强大且灵活的前端数据网格组件,它提供了丰富的功能和良好的用户体验,适用于各种需要表格数据处理的场景。通过熟练掌握和应用,开发者可以大幅提升前端应用的数据管理能力,为...

    fixedtable.rar

    因此,合理选择需要冻结的列数,优化代码性能,以及考虑在移动设备上的适配,都是使用此类功能时需要考虑的问题。 综上所述,"fixedtable.rar" 提供了一种实现网页表格冻结列和冻结表头的方法,通过使用jQuery库和...

    【JavaScript源代码】jQuery实现Table分页效果.docx

    表格包含三列:品牌、店铺和仓库。表格的数据是动态加载的,通过`&lt;tbody id='tbody'&gt;&lt;/tbody&gt;`来存放。 接着是JavaScript部分,主要涉及两个函数:`$(function () {})` 和 `ReportPage(pageIndex)`。`$(function ()...

    Table 绘制 撤销

    2. **创建表格**:在大多数文本编辑软件(如Microsoft Word)和网页编辑器中,可以通过菜单栏的“插入”选项创建表格,选择所需的行数和列数。在代码环境中,例如HTML,可以直接编写相应的标签结构来创建。 3. **...

    handsontable 类似excel的页面插件

    5. **列宽和行高调整**:用户可以自由调整列宽和行高,以适应不同数据量和展示需求。 6. **行/列插入和删除**:允许动态增删行和列,适应数据变化。 7. **数据验证**:可以设置数据验证规则,确保输入数据的正确性...

    jq模拟excel.zip

    综上所述,"jq模拟excel.zip"项目通过jQuery和jExcel库实现了在Web浏览器中创建一个功能丰富的电子表格,它为用户提供了类似于Excel的交互体验,且完全基于前端技术,无需服务器端的支持。对于需要在线处理和展示...

    完整的flexigrid的dome

    Flexigrid是一款基于jQuery的轻量级数据网格插件,它提供了丰富的功能,如分页、排序和查询,适用于各种Web应用程序,特别是那些需要展示大量结构化数据的场景。在这个"完整的flexigrid的dome"中,我们可以深入学习...

    easyui datagrid 大数据加载效率慢,优化解决方法(推荐)

    4. 减少列宽和列数:过多的列和过宽的列会导致更多的计算和渲染,适当减少可以提升性能。 5. 选择合适的版本:保持EasyUI库的更新,使用最新版本,因为新版本通常会包含性能优化。 6. 使用适合的数据格式:JSON...

    easyUI使用分页过滤器对数据进行分页操作实例分析

    EasyUI是一个基于jQuery的轻量级UI库,提供了丰富的组件,如表格、分页、对话框等,用于快速构建前端应用。 首先,我们看到在HTML部分,创建了一个`&lt;table&gt;`元素,它具有`easyui-datagrid`类,这表明它将作为EasyUI...

Global site tag (gtag.js) - Google Analytics