jquery-truncation of long strings

Source: Internet
Author: User
Tags truncated

The page gets the string data too long, causing the displayed table to be arranged in an untidy format, which is to be displayed after processing a string that is too long in the table.

Method One: (Other blogs See the method)

JS Method:

<script type= "Text/javascript" >

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 () {
Call Method:
$(". Table TR TD"). limit ();

The. Table TR TD is the control that is applied to, or $ ("#clazzTd") If it is id= "CLAZZTD". Limit ();


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

<script >


JSP calls:


<div id= "CLAZZTD" limit= "ten" > page gets the string data too long, resulting in the displayed table arrangement is not neat </div>

Table Call:

<table>

<tr>

<td> page Gets the string data too long, causing the displayed table to be arranged neatly </td>

</tr>

</table>


---------------------------------------------------------------------------------------

Special cases


When a table is added via jquery, the first method has no effect, regardless of whether the ID or the class attribute or the label's truncation of the long string is forexample.


The first method is only for the case or through tags (<c:foreach> <tr><td>33333444 </td> </tr></foreach> The rows that are added to the page are valid.


Comparison chart:

The first line is valid for other additions through jquery append without effect.

----------------------------------------------------------------------------------------------------

Method Two:


JS Method:

/**
* @param string
* @returns
* Truncated long strings
*/
function Sublimit (String)
{
var objlength =string.length;
var num = 20;
if (Objlength > num) {
String=string.substring (0,num) + "...";
}
alert (string);
return string;
}


In the jquery method:

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+ "') > Modify </a>&nbsp; " +
"<a class= ' a_track ' Href=javascript:delresource ('" +res.code+ "') > Delete </a></td> </tr>";
$ (". Table"). Append (tr);

Explain:

Sublimit (Res.extend) is called method to intercept the parameters and return the truncated string;

Title= ' "+res.cname+" ', the Title property is the full string displayed when the mouse is moved over the string.


For example:


Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

jquery-truncation of long strings

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.