Jquery-截取过长字符串

最新推荐文章于 2024-07-14 03:32:41 发布

原创最新推荐文章于 2024-07-14 03:32:41 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#截取过长字符串

JAVA 专栏收录该内容

61 篇文章

订阅专栏

本文介绍了如何使用jQuery处理页面中表格数据过长导致的排列不整齐问题。提供了两种方法：方法一是通过jQuery.fn.limit()函数，限制每个单元格显示的字符数，并在鼠标悬停时显示完整内容；方法二是使用自定义的subLimit()函数，直接截取字符串并在需要的地方调用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面获取的字符串数据过长，导致显示的表格排列不整齐，这是就要对表格中过长的字符串进行处理之后显示。

方法一：

js方法：

jQuery.fn.limit=function(){
var self = $(".table tr td");
self.each(function(){
var objString = $(this).text();
var objLength = $(this).text().length;
var num = 5;//$(this).attr("limit");

if(objLength > num){
$(this).attr("title",objString);
objString = $(this).text(objString.substring(0,num) + "...");
}
})
}
$(function(){
//调用方法：
$(".table tr td").limit();

//.table tr td是所应用到的控件，如果是id="clazzTd" 则为 $("#clazzTd").limit();

//$(document.body).limit();
});

jsp 调用：

<div id="clazzTd" limit="10"> 页面获取的字符串数据过长，导致显示的表格排列不整齐</div>

或

<table>

<tr>

<td>页面获取的字符串数据过长，导致显示的表格排列不整齐</td>

</tr>

</table>

方法二：

js方法：

/**
* @param string
* @returns
* 截取过长字符串
*/
function subLimit(string)
{
var objLength =string.length;
var num = 20;
if(objLength > num){
string=string.substring(0,num) + "...";
}
// alert(string);
return string;
}

jquery方法中：

var tr="<tr><td title='"+res.code+"'>"
+ subLimit(res.code)
+ " </td> <td title='"+res.cname+"'>"
+ subLimit(res.cname)
+ "</td> <td title='"+res.hosts+"'>"
+ subLimit(res.hosts)
+ "</td> <td title='"+res.clazz+"'>"
+ subLimit(res.clazz)
+ "</td> <td title='"+res.handlerClazz+"'>"
+ subLimit(res.handlerClazz)
+ "</td> <td title='"+res.extend+"'>"
+ subLimit(res.extend)
+ "</td>"
+ "<td><a class='a_model a_collect' href=javascript:openUpdateModal('"+res.code+"','"+res.cname+"','"+res.hosts+"','"+res.clazz+"','"+res.handlerClazz+"','"+res.extend+"')>修改</a>  " +
"<a class='a_track' href=javascript:delResource('"+res.code+"')>删除</a></td> </tr>";
$(".table").append(tr);