格式化table长度

最新推荐文章于 2022-02-21 17:00:26 发布

胖鹅68

最新推荐文章于 2022-02-21 17:00:26 发布

阅读量522

点赞数

分类专栏： jquery/js库/Jest

本文链接：https://blog.csdn.net/hbiao68/article/details/17114449

版权

jquery/js库/Jest 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

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

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

胖鹅68

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
格式化table长度

在开发的过程当中，经常会碰到展示列表内容过长，因此需要修改代码，将显示的长度设定为合适的长度，使界面变得美观 field1 field2 field3 field4 field5 11111111111111111111111111 111111111
复制链接

扫一扫