數飛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>