Объединить ячейки с помощью Javascript - PullRequest
Новая
       5

Объединить ячейки с помощью Javascript

1 голос
/ 04 марта 2010

У меня есть Googled merge + cell + Javascript, но я не нашел подходящего кода для реализации ячеек слияния в таблице.

Есть ли какое-либо руководство, с помощью которого я могу создать такую ​​функцию, как MS-WORD Table Cell Mergeиспользуя Javascript.

Нужен ваш совет.

Ответы [ 4 ]

2 голосов
/ 04 октября 2017

Вы можете использовать Table.js , автономную библиотеку JavaScript, которую я написал для работы со сложными таблицами. Вы можете использовать что-то вроде этого: 

var mytable = new Table(document.getElementById('mytable')),
    cell1 = document.getElementById('cell1'),
    cell2 = document.getElementById('cell2');
 mytable.merge([cell1, cell2], function(colspan, rowspan, newcell, oldcell){
    // colspan is the future value of the "colSpan" attribute of newcell
    // rowspan is the future value of the "rowSpan" attribute of newcell
    // newcell is the cell that is kept
    // oldcell is the cell that will be removed
    // Do what you want here
});

Первый аргумент функции - это Array из HTMLTableCellElement (<TD> или <TH> элементов) или NodeList. Второй аргумент является необязательным и является обратным вызовом, который вызывается всякий раз, когда две ячейки объединяются.

По умолчанию Table.js ограничен 50 слияниями при вызове <TableObject>.merge(). Вы можете изменить это с помощью 

window.Table.maxIteration = 100;

Вы также можете использовать аналогичные функции <TableObject>.mergeHorizontal(cells, callback) и <TableObject>.mergeVertical(cells, callback).

2 голосов
/ 04 марта 2010

В этом примере будут отображаться 16 ячеек в таблице 4x4. Если щелкнуть две или более ячеек, а затем нажать кнопку объединения, содержимое ячейки будет объединено в самую раннюю ячейку. Сделано в старомодном javascript (согласно тегу вопроса), но легко конвертируется в jquery.

Протестировано в Firefox, но должно работать в большинстве современных браузеров.

Это то, что вы хотите сделать? 

<html>
<head>
<title>Test Merge</title>
<style type="text/css">
td {border: solid 1px black; background:gray; padding:5px; margin:10px; }
</style>
</head>
<body>

<table>
<tr>
<td id="cell-1-1" onclick="merge(this);">a</td>
<td id="cell-1-2" onclick="merge(this);">b</td>
<td id="cell-1-3" onclick="merge(this);">c</td>
<td id="cell-1-4" onclick="merge(this);">d</td>
</tr>
<tr>
<td id="cell-2-1" onclick="merge(this);">e</td>
<td id="cell-2-2" onclick="merge(this);">f</td>
<td id="cell-2-3" onclick="merge(this);">g</td>
<td id="cell-2-4" onclick="merge(this);">h</td>
</tr>
<tr>
<td id="cell-3-1" onclick="merge(this);">i</td>
<td id="cell-3-2" onclick="merge(this);">j</td>
<td id="cell-3-3" onclick="merge(this);">k</td>
<td id="cell-3-4" onclick="merge(this);">l</td>
</tr>
<tr>
<td id="cell-4-1" onclick="merge(this);">m</td>
<td id="cell-4-2" onclick="merge(this);">n</td>
<td id="cell-4-3" onclick="merge(this);">o</td>
<td id="cell-4-4" onclick="merge(this);">p</td>
</tr>
</table>
<input type="button" id="merge" value="merge" onclick="mergeHighlighted();" />

</body>

</html>

<script language="javascript" type="text/javascript">
    function merge(o) {
        o.style.backgroundColor = "red";        
    }

    function mergeHighlighted() {
        var tds = document.getElementsByTagName("td");
        var firstCellId = "";
        var mergedCells = "";
        for (var i = 0; i < tds.length; i++) {
            if (tds[i].style.backgroundColor == "red") {
                mergedCells += tds[i].textContent;
                if (firstCellId == "") {
                    firstCellId = tds[i].id;
                }
                else {
                    tds[i].style.backgroundColor = "gray";
                    tds[i].style.display = "none";
                    tds[i].textContent = "";
                }
            }
        }
        var firstCell = document.getElementById(firstCellId);
        firstCell.textContent = mergedCells;
        firstCell.style.backgroundColor = "gray";
    }
</script>
2 голосов
/ 04 марта 2010

Если вы можете кодировать в javascript самостоятельно, это должно быть просто, как удаление второй ячейки и увеличение colspan первого на одну.

1 голос
/ 04 марта 2010

Если я правильно понял.
В HTML это называется colspan и rowspan. См. ссылку для примера кода с использованием jQuery.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...