$(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下测试通过
分享到:
相关推荐
latex表格行高、文本居中 m{7cm}垂直居中 加array宏包
jquery实现控制表格行高亮实例,需要的朋友可以参考一下
拖拽改变列宽的功能网上很多,但是拖拽改变行高的我搜了很久,也没有发现可以用的。所以利用原有改变行高的模版,自己写了一个原生javascrript改变列宽的模版。
易语言高级表格自动调整行高类源码,高级表格自动调整行高类,创建一个编辑框,高级表格初始化,高级表格_结束编辑_事件,取指定表格行数,GetModuleHandle,CreateFont,SendMessage,DeleteObject,GetWindowTextA,...
wps表格行距怎么调整 wps表格行高设置方法.docx
excel2007表格行高怎样设置.pdf
易语言源码易语言高级表格自动调整行高类源码.rar 易语言源码易语言高级表格自动调整行高类源码.rar 易语言源码易语言高级表格自动调整行高类源码.rar 易语言源码易语言高级表格自动调整行高类源码.rar 易语言...
自动调整电子表格的行高,合并的单元格也可以自动根据内容调整,比较方便
Excel表格快速调整最合适行高和列宽.ppt
excel表格如何调整行高和列宽.doc
易语言高级表格自动换行按行数调整行高源码,高级表格自动换行按行数调整行高,取指定表格行数
Excel表格的隔行调整行高的4种方法.docx
拖动单元格改变列宽或行高,可以扩展成表格设计器,改变tr 行高 td 列宽
excel表格如何设置行高.doc
Extjs 中想改变grid 行高,如果只是简单的设置了height的值是可以实现grid 的行高,但是如果使用了插件:rowexpander ,最出现新的问题。 感兴趣的朋友可以试试的。 此文档可以解决你的烦恼,为了找到资源下载,...
这是一款经过样式美化的jQuery表格信息自动向上滚动代码,鼠标悬停表格行高亮显示,并停止滚动。
可以看我另一个链接的实现哦https://blog.csdn.net/weixin_38433139/article/details/111350116 我例程里还实现了很多别的功能例如换行显示 设置行高,设置字体大小,点击获取行列数等等