Home/ Questions/Q 9222361
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T03:49:20+00:00

I have a table and I want to change colspan / rowspan property of

  • 0

I have a table and I want to change colspan/rowspan property of a cell on runtime. Here is an example:

<html>
    <head>
        <script type="text/javascript">
            function setColSpan() {
                document.getElementById('myTable').rows[0].cells[0].colSpan = 2
            }
        </script>
    </head>

    <body>
        <table id="myTable" border="1">
            <tr>
                <td>cell 1</td>
                <td>cell 2</td>
            </tr>
            <tr>
                <td>cell 3</td>
                <td>cell 4</td>
            </tr>
        </table>
        <form>
            <input type="button" onclick="setColSpan()" value="Change colspan">
        </form>
    </body>

</html>

My problem is that the cells shift. Am I supposed to remove the cells over which the cell in question spans?

I can I do without removing?

I want to implement a simple spreadsheet. For now I managed to be able to select a rectangular range of cells and show a menu with a “Merge selected cells” option. I would like to be able to “unmerge” cells, so it would be good to span cells without having to remove other cells.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think you need to delete the cell. Check with following code. What i did was removed the entire row and added new row with new column span

    function setColSpan() {
    var table = document.getElementById('myTable');
    table.deleteRow(0);
    var row = table.insertRow(0);
    var cell = row.insertCell(0);
    cell.innerHTML= "cell 1"
    cell.colSpan = 2
}
    • 0