jQuery 用 Bootstrap div 替换表格元素

Question

我正在尝试用 div 替换我的所有表格，以使它们的列在 Twitter Bootstrap 中可堆叠。这样人们仍然可以在后端使用 Tinymce 轻松创建表格，但不会破坏响应式设计。 Zurb 响应式表就是不切实际。

问题在于，引导 div 基于 12 列（span5、span7 等）的总宽度，因此每当表具有更多或更少的列时，div 类都需要更改。我在想我需要一个 JS 来计算表中的列数，然后在重新排序内容时用适当类的 div 替换那些。例如，对于一个两列表，类将是“span6”。对于四列表，它们将是“span3”。 Table 标记被替换为“row”类的 div

这超出了我的 JS 知识范围，任何人都可以伸出援手或更优雅的解决方案，仍然允许在所见即所得中轻松进行后端编辑？

Answer 1

应该可以做到。这是一个示例代码：

var table = $('table'),
    div = $('<div />');

$('td', table).each(function(){
    $('<div />').html($(this).html()).appendTo(div);
});

table.after(div).remove();

还有演示：http://jsfiddle.net/tkirda/7GM5w/