数飞OA：js控制table单元格多次合并
当获取一个单元格对象后，通过设置colSpan和rowSpan可实现单元格合并，我一直在用deleteCell的方式删除掉被合并的单元格，多次合并的时候，就很难定位到cellIndex, rowIndex，会导致合并后表格混乱的情况。探索了很多次，最终的解决办法是被合并的单元格不直接删除，而是采用设置style.display = “none”的方式。
以下为数飞OA测试单元格合并的代码，有兴趣的朋友一起来把它做完善。
<!-----数飞OA实验代码:在IE7上测试---->
<table border="1" width="500" height="200" id="tid">
<tr>
<td>0-0</td>
<td>0-1</td>
<td>0-2</td>
<td>0-3</td>
</tr>
<tr>
<td>1-0</td>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-0</td>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-0</td>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
当前单元格：<input type="text" value="0" id="rid">行 <input type="text" value="1" id="cid">列
<input type="button" value="往下合并" onClick="mergeDown()">
<input type="button" value="往右合并" onClick="mergeRight()">
<br>
当前行的内容：<input type="text" value="" id="vid"><input type="button" value="当前单元格内容" OnClick="DisplayValue();">
<script language="javascript">
function mergeDown() {
var oTable = document.getElementById("tid");
var iRow = parseInt(document.getElementById("rid").value);
var iCell = parseInt(document.getElementById("cid").value);
var oRow = oTable.rows[iRow];
var oCell = null;
//数飞OA注释：增加判断，避免null
if (oRow != null) {
oCell = oRow.cells[iCell];
}
if (oCell == null) {
return;
}
var v = 0;
var iRow2 = iRow;
var iRowSpan = oCell.rowSpan;
while (true) {
iRow2 = iRow2 + 1;
if (iRow2>oTable.rows.length) {
break;
}
var oRow2 = oTable.rows[iRow2];
var oCell2 = null;
if (oRow2 != null) {
oCell2 = oRow2.cells[iCell];
if (oCell2 == null) {
break;
}
//数飞OA注释：增加判断，避免不对称的合并方式
if (oCell2.colSpan != oCell.colSpan) {
alert("不可合并");
break;
}
if (oCell2.style.display == "none" && oCell2.style.colSpan == "yes" ) {
alert("不可合并");
break;
}
if (oCell2.style.display != "none") {
oCell2.style.display = "none";
//数飞OA注释：自定义个style样式，避免隐藏的单元格被多次合并。
oCell2.style.rowSpan = "yes";
iRowSpan += oCell2.rowSpan;
oCell.rowSpan = iRowSpan;
break;
} else {
//再往下合并
}
} else {
break;
}
}
}
function mergeRight() {
var oTable = document.getElementById("tid");
var iRow = parseInt(document.getElementById("rid").value);
var iCell = parseInt(document.getElementById("cid").value);
var oRow = oTable.rows[iRow];
var oCell = null;
if (oRow != null) {
oCell = oRow.cells[iCell];
}
if (oCell == null) {
return;
}
var v = 0;
var iCell2 = iCell;
var iCellSpan = oCell.colSpan; //
while (true) {
iCell2 = iCell2 + 1;
if (iCell2>oRow.length) {
break;
}
var oCell2 = null;
oCell2 = oRow.cells[iCell2];
if (oCell2 == null) {
break;
}
//if (oCell2.rowSpan != oCell.rowSpan || oCell2.style.display == "none") {
if (oCell2.rowSpan != oCell.rowSpan) {
alert("不可合并");
break;
}
if (oCell2.style.display == "none" && oCell2.style.rowSpan == "yes" ) {
alert("不可合并");
break;
}
if (oCell2.style.display != "none") {
iCellSpan += oCell2.colSpan;
oCell2.style.display = "none";
oCell2.style.colSpan = "yes"; //自定义的属性
oCell.colSpan = iCellSpan;
break;
}
}
}
//当前行内容
function DisplayValue() {
var oTable = document.getElementById("tid");
var iRow = document.getElementById("rid").value;
var iCell = document.getElementById("cid").value;
var oRow = oTable.rows[iRow];
var oCell = null;
if (oRow != null) {
oCell = oRow.cells[iCell];
}
if (oCell != null) {
document.getElementById("vid").value = oCell.innerText;
}
}
</script>
