oa中html中合并单元格的方法,用JS实现表格行合并

在我们现在做的OA系统中，表格已经成为不可缺少的重要组成部分，如果没有表格，我们的工作可能会增加很多。为了美观表格，常常需要将表格中相同内容的行进行合并，表格中的专用标签就是rowspan，描述一下就是将相邻2行或多行中相同位置的列进行合并，当然合并使用前提的，如内容相同，ID相同等等。这里

整个代码都比较简单，

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

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);

}

}

参数说明

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

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

演示页面

版权说明

用

最后声明

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