关闭

格式化table长度

340人阅读 评论(0) 收藏 举报
分类:

在开发的过程当中,经常会碰到展示列表内容过长,因此需要修改代码,将显示的长度设定为合适的长度,使界面变得美观

 

<!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>

 

 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:322290次
    • 积分:8881
    • 等级:
    • 排名:第2253名
    • 原创:1096篇
    • 转载:14篇
    • 译文:0篇
    • 评论:5条
    最新评论