在开发的过程当中,经常会碰到展示列表内容过长,因此需要修改代码,将显示的长度设定为合适的长度,使界面变得美观
<!DOCTYPE html>
<script src="jquery-1.4.4.js"></script>
<html>
<head></head>
<body>
<table id="hb">
<tr>
<td>field1</td>
<td>field2</td>
<td>field3</td>
<td>field4</td>
<td>field5</td>
</tr>
<tr>
<td>11111111111111111111111111</td>
<td>11111111111111111111111111</td>
<td>11111111111111111111111111</td>
<td>11111111111111111111111111</td>
<td>11111111111111111111111111</td>
</tr>
<tr>
<td>2222222222222222222222222222222222222222</td>
<td>2222222222222222222222222222222222222222</td>
<td><a href="">2222222222222222222222222222222222222222</a></td>
<td>2222222222222222222222222222222222222222</td>
<td>2222222222222222222222222222222222222222</td>
</tr>
<tr>
<td>333333333333333333333333333333333333333333</td>
<td>333333333333333333333333333333333333333333</td>
<td>333333333333333333333333333333333333333333</td>
<td>333333333333333333333333333333333333333333</td>
<td>333333333333333333333333333333333333333333</td>
</tr>
<tr>
<td>44444444444444444444444444444444444444444444444</td>
<td>44444444444444444444444444444444444444444444444</td>
<td>44444444444444444444444444444444444444444444444</td>
<td>44444444444444444444444444444444444444444444444</td>
<td>44444444444444444444444444444444444444444444444</td>
</tr>
</table>
</body>
</html>
<script>
$(function(){
alert(1);
formactTable("hb",[1,2,3],[10,10,10],5);
});
/*
排除第一行为tr的标签,索引数组和长度数组一致。从指定的第一个索引开始设置,第一列为0
id 字符串,table的id
arrIndex 数组,列索引
arrLength 数组,对应列的长度
defaultLength 数字,默认长度
formactTable("hb",[1,2,3,4,5],[10,10,10,10,20]);
formactTable2("hb",[1,2,3,4],[10,10,10,10],16);
*/
function formactTable(id,arrIndex,arrLength){
//最前面需要校验参数
//alert($("#"+id).find("tr").length);
//检查参数是否合理
//检查是否为字符串
if(typeof(id)!="string"){
return false;
}
//检查是否为数组
if(!(arrIndex instanceof Array)){
return false;
}
if(!(arrLength instanceof Array)){
return false;
}
//设置默认长度
var defaultLength = arguments[3];
if(defaultLength==undefined || defaultLength==null || defaultLength==""){
defaultLength = 10;
}else{
//检查默认字符串长度
if(typeof defaultLength != "number"){
defaultLength = 10;
return false;
}
}
if(arrIndex.length != arrLength.length){
alert("两个数组长度不一致");
return false;
}
var objTable = $("#"+id);
//检查该id控件是否存在
if(objTable.length==0){
return false;
}
var objTrs = $("#"+id).find("tr");
//如果
if(objTrs.length<1){
return false;
}
//标示从第n列开始
var startIndex = arrIndex[0];
$("#"+id).find("tr").each(function(num,dom){
//标题行不用考虑
if(num>0){
var col = arrIndex[num];
var tdsObj = $(dom).find("td");
//alert($(dom).find("td").length);
tdsObj.each(function(index,ele){
var colLength = arrLength[index-startIndex];
//从指定的列数开始设定
if(index >= startIndex){
//如果实际列数大于设定的列数,则显示默认长度
if(colLength==undefined || colLength==null || colLength==""){
colLength = defaultLength;
}
//如果有链接
if($(ele).find("a").length>0){
var a_content = $(ele).find("a").html();
$(ele).attr("title",a_content);
var len = a_content.length;
var temp="";
if(len > colLength){
temp = a_content.substring(0,colLength)+"...";
$(ele).find("a").html(temp);
}else{
//temp = content;
}
}else{
var content = $(ele).html();
//alert(content);
var len = content.length;
var temp="";
if(len > colLength){
temp = content.substring(0,colLength)+"...";
$(ele).html(temp);
$(ele).attr("title",content);
}else{
//temp = content;
}
}
}else{
//设定td的title属性
//如果有链接
if($(ele).find("a").length>0){
var a_content = $(ele).find("a").html();
$(ele).attr("title",a_content);
}else{
var content = $(ele).html();
$(ele).attr("title",content);
}
}
});
}
});
}
</script>