格式化table长度

原创 2013年12月04日 10:29:51

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

 

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

 

 

使用CSS格式化Table样式

在网页里使用table的时候,样式一般比较难管理,因为table的有些样式与其它控件不太一样1、table的分外边框,tr边框,td边框,它们之间都是有间距的2、你可以指定它们之间的间距为0,但当你设...
  • lecui
  • lecui
  • 2010年05月15日 11:23
  • 3414

格式化MyEclipse代码(java、jsp、js)行的长度@修改java代码字体@修改Properties文件编码方式

每次用MyEclipse/Eclipse自带的快捷键Ctrl+shift+f格式化代码时,如果原来的一行代码大于80列,Eclipse就会自动换为多行。如果想格式化代码后不想让代码换行可以通过以下方式...
  • tianyazaiheruan
  • tianyazaiheruan
  • 2013年11月12日 11:51
  • 6422

Eclipse格式化代码默认长度

eclipse 默认设置的换行长度, 格式化代码后,同一个方法里面参数也经常被,换行,非常难看。 方法/步骤 1.Java代码打开Eclipse的Window菜单,然后 Preferences->J...
  • Buaaroid
  • Buaaroid
  • 2016年01月18日 15:48
  • 886

Lua中获取table长度问题探讨

-- table.getn(tableName) 得到一个table的大小,等同于操作符# -- 要注意的是:该table的key必须是有序的,索引是从1开始的。 --例如有序的 local xi...
  • y6300023290
  • y6300023290
  • 2015年12月01日 16:59
  • 2888

LUA中table表长度问题

LUA中table表长度问题
  • qq_32319583
  • qq_32319583
  • 2016年11月28日 21:18
  • 1802

lua使用之table长度获取

1,循环输出表格元素 for firstIndex = 1, #(self.memoryCardsContainer) - 1 do 2,表格判断是否还有元素 if(#(self.memoryC...
  • themagickeyjianan
  • themagickeyjianan
  • 2015年01月09日 16:14
  • 697

lua中求table长度

关于lua table介绍,看以前的文章http://www.cnblogs.com/youxin/p/3672467.html。 官方文档是这么描述#的: 取长度操作符写作一元操作 #。...
  • luyafei_89430
  • luyafei_89430
  • 2014年11月05日 18:02
  • 33427

lua 求table长度

求table元素个数,一般采用#,getn来获取,这两个是等价的。看例子 t_ = { nil, 1, 2, "dd", nil, 4, nil, nil, 7 } i = 0 for k,v ...
  • ganpengjin1
  • ganpengjin1
  • 2015年05月24日 11:59
  • 2898

lua table 格式化打印

zr = {}; zr.p = function(data) sprint("#############core.print data zrp###########"); local cstring...
  • laozitianxia
  • laozitianxia
  • 2014年01月24日 14:27
  • 5526

Bootstrap Table 实现列格式化显示

格式化使用函数formatter 例如: formatter: function (value, row, index) { if (value == 'en'...
  • qq_26115733
  • qq_26115733
  • 2018年01月15日 17:58
  • 194
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:格式化table长度
举报原因:
原因补充:

(最多只允许输入30个字)