Question

我正在开发一个web项目，其中一个功能包括用户可以设计一个html表并允许用户拆分或合并单元格随意，（我正在为我的项目使用jQuery）。任何人都可以帮助我吗？

Answer 1

我刚刚找到了一个jquery插件来合并和拆分表格单元格。

这是链接： http://www.redips.net/javascript/table-td-merge-split/

Answer 2

我会使用一个小类来保持表的属性，然后根据需要重写它的InnerHTML。虽然调整td元素的colspan属性听起来很简单，但这不允许您添加列或行。它只允许你扩展你的列或行。

Answer 3

我不确定你需要什么帮助。您需要在TD元素上设置或删除colspan属性。

Answer 4

TinyMCE表插件完全符合您的需求。如果你不知道，它是一个功能齐全的wysiwyg html /文本编辑器输出HTML代码。

它是开源的，你可以看看它：

http://www.tinymce.com/download/download.php

我需要相同的功能，并希望能够从那里删除它，可能实现了jQuery版本，但不幸的是代码对我来说太复杂了。

还有其他类似的所见即所得编辑器，但据我所知，它们都没有提供加入或拆分单元格，添加，删除和调整行大小的相同功能，以及所有这些。

Answer 5

我已经写了下面的内容来分割多个单元格并将它们再次合并在一起，这是基本的但它对我来说效果很好。我使用逗号分隔单元格值，因此它知道在需要时将数据拆分回单独的单元格的位置......

使用Javascript：

function mergeCells(cells, separator) {

    var data = [];

    $.each(cells, function(i, item) {
        data.push(item[0].innerHTML);
    });

    var result = $('<td/>', {
        'html': data.join(separator)
    });

    return result;
}

function splitCell(cell, separator) {

    var result = "";
    var data = (cell[0].innerHTML).split(separator);
    $.each(data, function(i, item) {
        result = result + "<td>{0}</td>".format(item);
    });

    return result;
}

用法：

var merged = $('table').find('td:eq(1)');
var splitHtml = splitCell(merged, ", ");



var cell1 = $('table').find('td:eq(1)');
var cell2 = $('table').find('td:eq(2)');
var merged = mergeCells({
    1: cell1,
    2: cell2
}, ", ");
$(cell1).replaceWith(merged);
$(cell2).remove();

在javascript中合并或拆分表格单元的完整示例是什么？

5 个答案: