javascript - 将 HTML 表格转换为 Bootstrap 列 - 响应式设计

Question

我一直在研究我们现有的旧产品，该产品目前使用 HTML 表格来显示其内容。在这个响应性的世界里，我想让它响应。在线阅读后，我相信重新设计整个网站可能需要大量工作，但是，我正在尝试找到一种解决方案，可以将任何表格转换为基于包含 Bootstrap 列的 div 的列。这里给出了登录页面的一个很好的例子:JsFiddle

我无权访问字段的源，但是，我可以使用 jQuery 添加元素(追加/前置)。我还可以添加 CSS 样式。

有人可以帮我解决这个问题吗？

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

干杯。

Answer 1

可能很难将任何给定的表完美地转换为 Bootstrap 列。考虑到 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')) ( Fiddle )

对于更灵活的解决方案，(假设您实际上正在显示表格数据)您可能会考虑只使用 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')) ( Fiddle )