用户注册



邮箱：

密码：

用户登录


邮箱：

密码：
记住登录一个月忘记密码？

发表随想


还能输入：200字
云代码 - javascript代码库

JQuery合并某列（行）单元格

2012-12-18 作者： 云代码会员举报

[javascript]代码库

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>合并单元格(列)</title>
<style type="text/css"> 
td{
	font-size: 12px;
	background-color: #D4D4D4;
	border: 1px solid #9AC0CD;
}
</style>
<script src="jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
       _w_table_lefttitle_rowspan("#rspan",0,0);
    })
</script>
<script language="javascript">
function _w_table_lefttitle_rowspan(_w_table_id, _w_table_mincolnum,
		_w_table_maxcolnum) {
	if (_w_table_mincolnum == void 0) {
		_w_table_mincolnum = 1;
	}
	if (_w_table_maxcolnum == void 0) {
		_w_table_maxcolnum = _w_table_mincolnum;
	}
	if (_w_table_mincolnum > _w_table_maxcolnum) {
		return "";
	} else {
		var _w_table_splitrow = new Array();
		_w_table_onerowspan(1); // 只合并第一列
		/*
		 * for(iLoop=1;iLoop<=2;iLoop++){//合并前两列 _w_table_onerowspan(iLoop); }
		 */
	}

	function _w_table_onerowspan(_w_table_colnum) {
		_w_table_firstrow = 0;
		_w_table_SpanNum = 0;
		_w_table_splitNum = 0;
		_w_table_Obj = $(_w_table_id + " tr td:nth-child(" + _w_table_colnum
				+ ")");
		_w_table_curcol_rownum = _w_table_Obj.length - 1;
		if (_w_table_splitrow.length == 0) {
			_w_table_splitrow[0] = _w_table_curcol_rownum;
		}
		_w_table_lastrow = _w_table_splitrow[0];
		var _w_table_firsttd;
		var _w_table_currenttd;
		var _w_table_curcol_splitrow = new Array();
		_w_table_Obj.each( function(i) {
			if (i == _w_table_firstrow) {
				_w_table_firsttd = $(this);
				_w_table_SpanNum = 1;
			} else {
				_w_table_currenttd = $(this);
				if (_w_table_firsttd.text() == _w_table_currenttd.text()) {
					_w_table_SpanNum++;
					_w_table_currenttd.hide(); // remove();
				_w_table_firsttd.attr("rowSpan", _w_table_SpanNum);
			} else {
				_w_table_firsttd = $(this);
				_w_table_SpanNum = 1;
				setTableRow(i - 1);
			}
			if (i == _w_table_lastrow) {
				setTableRow(i);
			}
		}

		function setTableRow(_splitrownum) {
			if (_w_table_lastrow <= _splitrownum
					&& _w_table_splitNum++ < _w_table_splitrow.length) {
				_w_table_lastrow = _w_table_splitrow[_w_table_splitNum];
			}
			_w_table_curcol_splitrow[_w_table_curcol_splitrow.length] = _splitrownum;
			if (i < _w_table_curcol_rownum) {
				_w_table_firstrow = _splitrownum + 1;
			}
		}
	})	;
		_w_table_splitrow = _w_table_curcol_splitrow;
	}
}
</script>
</head>

<body>
<table width="500" height="350" border="0" cellpadding="0"
	cellspacing="0" id="rspan">
	<tr>
		<td><div align="center">A</div></td>
		<td><div align="center">Q</div></td>
		<td><div align="center">J</div></td>
		<td><div align="center">T</div></td>
		<td><div align="center">P</div></td>
		<td><div align="center">Z</div></td>
		<td><div align="center">F</div></td>
	</tr>
	<tr>
		<td><div align="center">A</div></td>
		<td><div align="center">W</div></td>
		<td><div align="center">J</div></td>
		<td><div align="center">Y</div></td>
		<td><div align="center">O</div></td>
		<td><div align="center">X</div></td>
		<td><div align="center">G</div></td>
	</tr>
	<tr>
		<td><div align="center">B</div></td>
		<td><div align="center">W</div></td>
		<td><div align="center">J</div></td>
		<td><div align="center">Y</div></td>
		<td><div align="center">P</div></td>
		<td><div align="center">Z</div></td>
		<td><div align="center">H</div></td>
	</tr>
	<tr>
		<td><div align="center">C</div></td>
		<td><div align="center">W</div></td>
		<td><div align="center">K</div></td>
		<td><div align="center">T</div></td>
		<td><div align="center">I</div></td>
		<td><div align="center">Z</div></td>
		<td><div align="center">H</div></td>
	</tr>
	<tr>
		<td><div align="center">C</div></td>
		<td><div align="center">E</div></td>
		<td><div align="center">L</div></td>
		<td><div align="center">T</div></td>
		<td><div align="center">I</div></td>
		<td><div align="center">X</div></td>
		<td><div align="center">G</div></td>
	</tr>
	<tr>
		<td><div align="center">C</div></td>
		<td><div align="center">E</div></td>
		<td><div align="center">J</div></td>
		<td><div align="center">U</div></td>
		<td><div align="center">I</div></td>
		<td><div align="center">C</div></td>
		<td><div align="center">F</div></td>
	</tr>
	<tr>
		<td><div align="center">D</div></td>
		<td><div align="center">Q</div></td>
		<td><div align="center">L</div></td>
		<td><div align="center">U</div></td>
		<td><div align="center">P</div></td>
		<td><div align="center">C</div></td>
		<td><div align="center">G</div></td>
	</tr>
	<tr>
		<td><div align="center">E</div></td>
		<td><div align="center">E</div></td>
		<td><div align="center">L</div></td>
		<td><div align="center">U</div></td>
		<td><div align="center">O</div></td>
		<td><div align="center">X</div></td>
		<td><div align="center">G</div></td>
	</tr>
	<tr>
		<td><div align="center">E</div></td>
		<td><div align="center">W</div></td>
		<td><div align="center">K</div></td>
		<td><div align="center">Y</div></td>
		<td><div align="center">O</div></td>
		<td><div align="center">C</div></td>
		<td><div align="center">H</div></td>
	</tr>
	<tr>
		<td><div align="center">E</div></td>
		<td><div align="center">W</div></td>
		<td><div align="center">K</div></td>
		<td><div align="center">T</div></td>
		<td><div align="center">P</div></td>
		<td><div align="center">X</div></td>
		<td><div align="center">F</div></td>
	</tr>
</table>
</body>
</html>

[代码运行效果截图]


JQuery合并某列（行）单元格


网友评论    (发表评论)


发表评论：

评论须知：

  • 1、评论每次加2分，每天上限为30；
  • 2、请文明用语，共同创建干净的技术交流环境；
  • 3、若被发现提交非法信息，评论将会被删除，并且给予扣分处理，严重者给予封号处理；
  • 4、请勿发布广告信息或其他无关评论，否则将会删除评论并扣分，严重者给予封号处理。


扫码下载

加载中，请稍后...

输入口令后可复制整站源码

加载中，请稍后...