Question

154

Set colspan/rowspan for a cell

rated 0 times [ 160] [ 6] / answers: 1 / hits: 65202 / 12 Years ago, fri, february 1, 2013, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kileyr

Add To Favorites

Follow

Total Points: 112

Total Questions: 105

Total Answers: 114

Location: United States Minor Outlying Island

Member since Sat, May 28, 2022

2 Years ago

answered 12 Years ago elmer · Accepted Answer

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

}