将HTML表转换为引导列 - 响应式设计

Question

我一直在研究一种旧产品,它目前使用HTML表来显示其内容.在这个响应的世界里,我想做出回应.在线阅读之后,我相信最终可能需要对整个网站进行重做工作,但是,我试图找到一个解决方案,将任何表转换为基于包含bootstrap列的div的列.这里给出了一个非常好的例子,用于登录页面:JsFiddle

我无法访问字段的来源,但是,我可以使用jQuery添加元素(append/prepend).我也可以添加CSS样式.

有人可以用这种方法帮助我吗？

<table></table>
.
.
.
<div class="container">
<div class="row">
<div class="col-md-3">
</div>
</div>
</div>

干杯.

Answer 1

将任何给定的表完美地转换为引导列可能很难。考虑到 bootstrap 列最多只允许 12 列，一个表可能有更多。

此函数将表转换为 BS 行/列，但它假定表行数可被 12 整除（如果不是，则必须根据自己的需要进行调整）。

/**
 * Convert a table to bootstrap columns
 * @param table DOMElement
 */
function makeBSCols(table){
    var html = ["<div class='container'>"];
    $(table).find('tr').each(function(){
        var $td = $(this).find('td').length ? $(this).find('td') : $(this).find('th');
        // get the column width
        if($td.length > 12) return alert("too many columns");
        var cls = Math.floor(12/$td.length);
        if(cls!==(12/$td.length)) return alert("invalid column count");
        html.push("<div class='row'>");
        $td.each(function(){
            html.push('<div class="col-sm-'+cls+'">'+$(this).html()+'</div>');
        });
        html.push('</div>');
    });
    html.push('</div>');
    $(table).replaceWith(html.join(''));
}

例如：makeBSCols(document.getElementById('myTable'))（小提琴）

对于更灵活的解决方案，（假设您实际上是在显示表格数据），您可能会考虑只使用 BS 表而不是 BS cols/rows。这个只是将 BS 样式添加到您的表格中，并将其放入.table-responsive有助于响应的div 中。

/**
 * Convert a regular table to bootstrap table
 * @param table DOMElement
 */
function makeBSTable(otable){
    var table = $(otable).clone(); console.log(table);
    table.addClass("table-hover table-bordered table-striped table");
    var div = $('<div class="table-responsive" />');
    $(otable).replaceWith(div);
    div.append(table);
}

例如：makeBSTable(document.getElementById('myTable'))（小提琴）