$(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(/</g, "<");
content = content.replace(/>/g, ">");
content = content.replace(/&/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表格列表排序代码**是一种在网页中实现类似Excel表格功能的技术,它允许用户对数据进行排序、检索和筛选,提供了丰富的交互体验。在Web开发中,jQuery库因其简洁的API和强大的功能而被广泛应用,对于...
5. **列宽和行高调整**:用户可以自由调整列宽和行高,使得表格布局更加灵活。 6. **拖放功能**:支持列拖动,可以调整列的顺序,也可以通过拖放添加、删除行。 7. **复制和粘贴**:兼容Excel的复制和粘贴操作,...
5. **API与事件**:强大的API接口和丰富的事件系统,允许开发者对Handsontable进行深度控制和扩展。 三、jQuery集成 在jQuery项目中整合Handsontable,首先需要引入jQuery库和Handsontable的CSS及JS文件。接着,...
《代码调整表格.zip》是一个包含JS特效的资源包,主要用于实现对表格列宽和行高的动态调整功能。在网页开发中,特别是在数据展示时,用户可能需要根据自己的需求来定制表格的显示效果,例如调整列宽以适应不同长度的...
总结来说,jQuery Handsontable是一个强大且灵活的前端数据网格组件,它提供了丰富的功能和良好的用户体验,适用于各种需要表格数据处理的场景。通过熟练掌握和应用,开发者可以大幅提升前端应用的数据管理能力,为...
因此,合理选择需要冻结的列数,优化代码性能,以及考虑在移动设备上的适配,都是使用此类功能时需要考虑的问题。 综上所述,"fixedtable.rar" 提供了一种实现网页表格冻结列和冻结表头的方法,通过使用jQuery库和...
表格包含三列:品牌、店铺和仓库。表格的数据是动态加载的,通过`<tbody id='tbody'></tbody>`来存放。 接着是JavaScript部分,主要涉及两个函数:`$(function () {})` 和 `ReportPage(pageIndex)`。`$(function ()...
2. **创建表格**:在大多数文本编辑软件(如Microsoft Word)和网页编辑器中,可以通过菜单栏的“插入”选项创建表格,选择所需的行数和列数。在代码环境中,例如HTML,可以直接编写相应的标签结构来创建。 3. **...
5. **列宽和行高调整**:用户可以自由调整列宽和行高,以适应不同数据量和展示需求。 6. **行/列插入和删除**:允许动态增删行和列,适应数据变化。 7. **数据验证**:可以设置数据验证规则,确保输入数据的正确性...
综上所述,"jq模拟excel.zip"项目通过jQuery和jExcel库实现了在Web浏览器中创建一个功能丰富的电子表格,它为用户提供了类似于Excel的交互体验,且完全基于前端技术,无需服务器端的支持。对于需要在线处理和展示...
Flexigrid是一款基于jQuery的轻量级数据网格插件,它提供了丰富的功能,如分页、排序和查询,适用于各种Web应用程序,特别是那些需要展示大量结构化数据的场景。在这个"完整的flexigrid的dome"中,我们可以深入学习...
4. 减少列宽和列数:过多的列和过宽的列会导致更多的计算和渲染,适当减少可以提升性能。 5. 选择合适的版本:保持EasyUI库的更新,使用最新版本,因为新版本通常会包含性能优化。 6. 使用适合的数据格式:JSON...
EasyUI是一个基于jQuery的轻量级UI库,提供了丰富的组件,如表格、分页、对话框等,用于快速构建前端应用。 首先,我们看到在HTML部分,创建了一个`<table>`元素,它具有`easyui-datagrid`类,这表明它将作为EasyUI...