JavaScript中是否有合并或拆分表格单元的完整示例？

Question

我正在开发一个web项目，其中一个功能包括用户可以设计一个html表格，并允许用户分割或合并单元格（我正在为我的项目使用jQuery）。谁能帮我？

Answer 1

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

Answer 2

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

Answer 3

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

它是开源的，你可以在它一起来看看：

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

我需要的相同的功能，并希望能够从那里废了，也许实现一个jQuery版本，但不幸的是，代码对我来说太复杂了。

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

Answer 4

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

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

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();