处理后效果
html原始数据:
<style type="text/css">
/* .word_tolong_limit 文本超长限制, */
.word_limit { /*width: 30em; */cursor:pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
</style>
<tr articleIds="40019413853863936" depId="0443fea5641a453780e2e2780f2ff5b3">
<td word_set="limit:15">whl,多文件测试2023-4-21A 10:20:47---1</td>
<td>超级管理员</td>
<td word_set="limit:9">勘探项目管理三部</td>
<td word_set="limit:10">武松(财务科),李世民(计划财务科),陈成思(人事科)</td>
<td word_set="limit:10" title="报送栏目">摄影作品</td>
</tr>
使用limit:15这个控制显示最大字符数,15表示最多显示多少字,多的字用省略符。
处理的js代码,在鼠标点击单元格时,弹出单元格原本的所有数据内容
!function () {
/* 处理表格里面,字符太多,用省略符,点击显示所有文本。
*/
$("[word_set]").each(function (index, elem) {
var contentHtml = $(elem).html();
/**属性值设置举例: limit:15;color:red;*/
var setOptions = $(elem).attr('word_set');
if (setOptions == null || setOptions == "") {
return true;
}
/* 读取limit设置的字符长度*/
var wordLengLimit = 20;
var regex2 = new RegExp(/(?<=limit\s*:\s*)\d+/, "i");
var arr = regex2.exec(setOptions);
if (arr.length>0) {
wordLengLimit = arr[0];
}
var content = $(elem).text();
if (content.length < wordLengLimit) {
return true;
}
content = content.trim();
var regex5 = new RegExp("<br/>", "g");
var html2 = contentHtml.replace(regex5, " ");
var regex3 = new RegExp("<br>", "g");
html2 = html2.replace(regex3, " ");
//console.log(997,html2);
$(elem).html("<div class=\"word_limit\" style=\"width: " + wordLengLimit + "em; \">" + html2 + "</div>");
if (content != null && content.length > 9) {
/** 点击显示所有文本 */
$(elem).click(function () {
//var txt2 = $(this).html();
alert(contentHtml);
});
}
});
}();