数飞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>