У меня есть таблица, и я хочу изменить свойство colspan / rowspan ячейки во время выполнения. Вот пример:

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

Моя проблема в том, что клетки смещаются. Должен ли я удалить клетки, на которые распространяется рассматриваемая клетка?

Я могу обойтись без удаления?

Я хочу реализовать простую электронную таблицу. На данный момент мне удалось выбрать прямоугольный диапазон ячеек и показать меню с опцией «Объединить выделенные ячейки». Я хотел бы иметь возможность "разложить" ячейки, поэтому было бы хорошо охватить ячейки, не удаляя другие ячейки.

10
warvariuc 1 Фев 2013 в 08:07

2 ответа

Лучший ответ

Я думаю, вам нужно удалить ячейку. Проверьте с помощью следующего кода. То, что я сделал, удалил всю строку и добавил новую строку с новым диапазоном столбцов

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
}
21
999k 2 Май 2017 в 07:04

Клетки смещаются, потому что это то, что вы говорите, чтобы сделать это. Вы определяете таблицу следующим образом:

<tr>
    <td colspan="2">cell 1</td>
    <td>cell 2</td>
</tr>
<tr>
    <td>cell 3</td>
    <td>cell 4</td>
</tr>

Таким образом, ожидаемый вами сдвиг - это то, чего я ожидал.

Если вы хотите объединить ячейки, вам придется взять содержимое всех объединенных ячеек, объединить их в одну ячейку и удалить остальные. Для тривиального примера это будет выглядеть так:

function setColSpan() {
    var myTable = document.getElementById('myTable');
    var cell2html = myTable.rows[0].cells[1].innerHTML;
    myTable.rows[0].deleteCell(1);
    myTable.rows[0].cells[0].innerHTML = myTable.rows[0].cells[0].innerHTML + ' ' + cell2html;
    myTable.rows[0].cells[0].colSpan = 2;
}

Однако более надежное решение ... довольно сложно. Особенно, если вы хотите, чтобы способность раскрыться. Вам нужно как-то сохранить информацию о старой структуре ячеек ... возможно, поместив что-то вроде <span class="oldCell">cell 2</span> вокруг объединенных данных? А потом проверять наличие пролётов "oldCell" при отключении? Но тогда вам придется сохранить эту информацию путем редактирования пользователем. И выясните, что это значит для объединения строк и столбцов. А также выяснить, что это значит для перекрывающихся слияний.

1
spinn 14 Апр 2014 в 14:49