分享一段用jquery来重排表格的代码

Posted by Smeagol | Posted in Uncategorized | Posted on 03-11-2011

Tagged Under :

由于工作需要,于是就写了这样一段代码。它的作用是重排已有的页面上的表格,让表格中的为空的名值对隐藏,使表格重新排列。顺便用了下wp的语法高亮插件SyntaxHighlighter。欢迎大家拍砖,这里留的问题是如果定义一个jquery的对象集合?

<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表格重列</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
</head>
<body>
	<table border="1">
		<tr>
			<th>姓名:</th>
			<td>Smeagol</td>
			<th>性别:</th>
			<td>男</td>
		</tr>
		<tr>
			<th>年龄:</th>
			<td>16岁</td>
			<th>婚姻状况:</th>
			<td></td>
		</tr>
		<tr>
			<th>学历:</th>
			<td>初中</td>
			<th>籍贯:</th>
			<td>潘多拉星球</td>
		</tr>
	</table>
	<script type="text/javascript" charset="utf-8">
		function tableRestate(_table,colCouple) {
			var mod = colCouple*2;
			var _title = _table.find(".title").prop("colspan",mod).parent().remove();
			var _tds = _table.find("td,th");
			_tds.each(function(i){
				if(!this.innerHTML){
					_tds = _tds.not($(this).remove()).not(_tds.eq(i-1).remove());
				}
			});
			_table.empty();
			_table.append(_title);
			var _tr;
			_tds.each(function(i){
				if(i%mod==0){
					_tr = $(this);
				}else{
					_tr = _tr.add($(this));
				}
				if(i%mod==mod-1 && i!=0){
					_tr = _tr.wrapAll("<tr></tr>").parent();
					_table.append(_tr);
					_tr = "";
				}
			});
			var emptyCell = _tds.length % mod;
			if (emptyCell) {
				emptyCell = mod - emptyCell;
				for (var i = 0; i < emptyCell; i++) {
					_tr = _tr.add("<td></td>")
				};
				_tr = _tr.wrapAll("<tr></tr>").parent();
				_table.append(_tr);
			};
		}
		tableRestate($("table"),4);
	</script>
</body>
</html>