javascript - jQuery 用 Bootstrap div 替换表格元素

Question

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

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