Question

所以我正在构建CMS并且对于给定的页面，我想让客户端布局页面（不是网站布局，页面布局，即内容;标题，文本，图像框，更多链接等）与给定的元素。由于表格布局很容易理解为客户端，我将使用它。省去了“总是使用CSS布局”的评论。我通常使用CSS，但为此我真的认为表格布局是为客户提供易用环境的最佳方式。

因此，客户端应该有一个“编辑布局”按钮，它将它们带到一个新页面，其中显示了布局网格，所有内容“模块”显示为方框。他们应该能够重新安排盒子并随意将它们分类到桌子内。这对我来说没问题，但我希望客户端能够编辑布局表本身。

他们应该能够添加一列，添加一行，合并单元格（水平）并调整单元格宽度（不是高度）。

我一直在谷歌搜索，但大多数表jQuery插件是关于编辑表DATA，而不是表本身。

任何人都有一个很好的建议，从哪里开始？

Answer 1

一些简短的例子可以帮助您入门（保留未经测试的任何内容，但至少可以帮助您入门）

您当然必须让客户了解要选择的行，单元格和列。我把它留给你，但是$('table').click()可能会正常工作。

复制最后一个表行并将其插入到最后一个表之后：

$('#main-table-layout tr:last').after($('#main-table-layout tr:last').clone());

在表格中插入一个新列（在每一行中创建一个td）

$('#main-table-layout tr).each(function(){
  $(this).find('td:last').after($('<td></td>'));
});

调整单元格宽度，你最好用css：

$('#the-cell-that-you-want-to-change').css('width','500px');

调整所有单元格的宽度：

$('td').css('width','500px');

或者到第3列（每行第3个单元格）

$('tr').each(function(){$(this).find('td:eq(2)').css('width','500px')});

可以将前一个作为

$('tr').find('td:eq(2)').css('width','500px');

但我不确定jQuery如何选择那里。

但是，最后我认为你最好让他们使用像CKEditor这样的编辑器或类似的东西。为您省去自己处理的所有麻烦。