用JS实现表格行合并

在我们现在做的OA系统中,表格已经成为不可缺少的重要组成部分,如果没有表格,我们的工作可能会增加很多。为了美观表格,常常需要将表格中相同内容的行进行合并,表格中的专用标签就是rowspan,描述一下就是将相邻2行或多行中相同位置的列进行合并,当然合并使用前提的,如内容相同,ID相同等等。这里jucelin写了个用JS实现表格行合并的代码,主要使用ID来判断的,不足是出现了相同的ID,但如果调用getElementById的话,在合并之后调用即可。

整个代码都比较简单,jucelin加入了各种判断,主要是为了匹配各种情况,也没找到相关的优化方案。

核心代码(双击代码可以编辑复制):

<script language="javascript">
function TableRowsSpan(tableID, ColList) {
	var ColArray = ColList.split(",");
	var TableName = document.getElementById(tableID);
	var TableRowsCount = TableName.rows.length;
	for (j = ColArray.length - 1; j >= 0; j--) {
		PreId = "";
		CurId = "";
		TempCount = 1;
		for (i = 0; i <= TableRowsCount; i++) {
			if (i != TableRowsCount) {
				CurId = TableName.rows[i].cells[ColArray[j]].id;
				if (CurId != "") {
					if (CurId == PreId) {
						TempCount += 1;
					}
					 else {
						if (TempCount > 1) {
							SpanRows(TableName, i, j, TempCount, ColArray[j]);
						}
						PreId = CurId;
						TempCount = 1;
					}
				}
				 else {
					if (TempCount > 1) {
						SpanRows(TableName, i, j, TempCount, ColArray[j]);
					}
					PreId = CurId;
					TempCount = 1;
				}
			}
			 else {
				if (TempCount > 1) {
					SpanRows(TableName, i, j, TempCount, ColArray[j]);
				}
				PreId = CurId;
				TempCount = 1;
			}
		}
	}
}
function SpanRows(TableName, i, j, TempCount, ColArrayj) {
	TableName.rows[i - TempCount].cells[ColArrayj].rowSpan = TempCount;
	for (m = i - TempCount + 1; m <= i - 1; m++) {
		TableName.rows[m].deleteCell(ColArrayj);
	}
}
</script>

参数说明

tableID : 表格的ID,即选择要被操作的表格

ColList : 被选表格中需要需要合并的列,从第0个开始,即第一列则填0,以半角逗号分割,超出最大值出错

演示页面

https://jucelin.com/wp-content/uploads/2012/01/TableRowsSpan.html

版权说明

JS实现表格行合并的代码是手敲的,思路是自己想的,如果你觉得有必要,就在适当的位置添加上jucelin的名字或网址。本代码自由转载,自由修改,自由使用,如果你有改进,发我一份则十分感谢。

最后声明

用JS实现表格行合并的代码你可以自由使用,但建议你根据实际需求修改后再应用到实际生产中去,避免不必要的资源浪费。越强大越智能,功能越强的代码都是以消耗资源为前提的,并不是每个产品都需要写个jQuery类型的功能库。

本文固定链接: https://jucelin.com/js-spanrows-for-table.html | Jucelin

该日志由 jucelin 于2012年01月20日发表在 前端设计, 实验室 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 用JS实现表格行合并 | Jucelin
关键字: , , , , ,

用JS实现表格行合并:目前有9 条留言

  1. 5楼
    陌凡:

    我的站里也是又3个JS百度说要我合并,可惜还是不会

    2012-02-04 09:49
    • jucelin:

      不用那么苛刻的,如果全部合并到一个文件里面会导致文件大,下载速度慢,而且浏览器在下载的时候是多线程同时下载的,与其放在一个文件里面,还不如分开放呢。在google的page speed测试下,90分就算优秀了,不过你的是70分,呵呵

      2012-02-05 20:12
  2. 4楼
    su:

    苏子来拜个晚年了啊 哈哈去给我的AD送点小费吧

    2012-02-03 13:32
  3. 地板
    gleaner:

    ID相同是不是不太好啊

    2012-01-31 09:52
    • jucelin:

      如果是在执行合并之后使用ID,不影响的。虽然这样,但我也觉得不妥,呵呵

      2012-01-31 16:18
  4. 板凳
    象牙塔:

    OA系统是嘛呀 用户系统?

    2012-01-27 22:47
    • jucelin:

      就是办公自动化Office Automation,可以百科下

      2012-01-28 00:12
  5. 沙发
    陌凡:

    学习一下。哈哈。朋友新年快乐哦

    2012-01-21 23:51

发表评论

您必须 [ 登录 ] 才能发表留言!

更多