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'))（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）

Answer 2

致OP：您需要在整个项目中重写表格

根据您的要求，您不想重做任何已构建的表格，也希望将现有表格转换为响应式div。

首先，要提供一个可以在整个项目中运行的解决方案，非常重要的是您网站中的所有表格在其结构中遵循相同的标准。我现在从登录页面看到它非常随意。

即使您编写的解决方案可以在您提供的屏幕上工作（登录屏幕），我也不确定这对您的整个网站是否足够。屏幕中的表嵌套到核心。如果你接受这种方法，你永远不会知道所有可能会破坏的东西。

所以我的建议是 ..已完成的工作已经完成。以前的开发人员过去只使用表来构建页面，但世界已经变为响应性。它也将在未来几年内发生变化。我们不知道。因此，您有时间将所有页面重写为新的HTML结构并升级到最新的可能代码。

对于普通公众谁希望根据设备将表格更改为div

快速检查： Working fiddle（调整结果屏幕大小以查看效果）

据我所知，您要在中型和大型设备上显示table的要求，但是当用户在小型设备上或将屏幕调整为小型时，您希望以不同的方式显示它，更像是div结构。

我有一个使用内置引导类的解决方案。

<强>解决方案：

创建表格（在中型和大型设备中显示）和其他HTML结构（您希望在小型设备中显示）。
使用 Helper Classe 提供的引导程序根据视口切换表格和其他部分的显示。

以下是文档的快照以及TestCase

所以你需要的是上面给出的细节..

// the tables are visible only on medium and large devices
<table class="visible-md-block visible-lg-block"> 
  //..your table structure
</table>

 // This section is only visible in small and extra small devices
 <div class="visible-xs-block visible-sm-block"> 
  //The table data represented in a div structure.
  //Each row can be structured as sections with header as label and row data as value.
 </div>

<强>缺点：

使用此方法，如果用户在任何设备中，您将最终获得额外的HTML或从不调整屏幕大小。

<强>优点：

这并不要求您在调整屏幕大小时继续处理，以便构建新的部分。这也意味着你不需要Jquery。
这并不需要您找出用户所在的设备。
工作是唯一的CSS

希望这会有所帮助!!

Answer 3

我不认为这是解决问题的“最好的”形式，但是如果你只能使用CSS和jQuery，我认为你可以只划分表数据的每一部分，使用$(...).hide()来制作它是不可见的，然后使用$(...).html()将该内容放入Bootstrap的div中。

Answer 4

我认为如果网站基于html表，你将不得不重写整个HTML。

如果您使用表格＆＃34;正常＆＃34;您只需将class="table添加到表

即可

此外，您可以将表格包裹在class="table-responsive"

的div中

e.g：

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

还提供了一些其他样式：table-hover table-striped ... 你可以在这里找到一些样品：http://getbootstrap.com/css/#tables

Answer 5

我认为你是对的，一个完整的重构可能会耗费大量的工作。但是我真的会考虑更多让它称之为混合解决方案：为什么不选择一些组件并很好地重构它们。您拥有的旧产品将显着改善，但在第一步中不是100％。对于现在无法重构的部分，制定一个漂亮的计划。其他人提到的解决方案完美地解决了您的问题，但我认为您最终会遇到难以维护的产品。没有人会从这样的产品中受益，对吗？

Answer 6

Bootstrap是按照所有设备响应的分割列和行尝试此

使用这种响应式设计。

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-lg-offser-2 col-lg-5">
            <form>
                <div class="form-group">
                    <input type="text" name="username" class="form-control" placeholder="Username">
                </div>
                <div class="form-group">
                    <input type="password" name="pass" class="form-control" placeholder="Password">
                </div>
                <div class="form-group">
                    <button class="btn btn-success">Login</button>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>

Answer 7

您可以使用jQuery提取信息，只需将其添加到您拥有的表中即可。我使用标签然后标题和内部我使用普通和标签。适合我。我使用jQuery来提取数据并添加到表中。这很容易做到。

对响应式引导程序页面有用的东西可能是使用下面的表格代码并将其放在您创建列的位置，例如：

<div class="container">
    <div class="row">
        <div class="col-md-4"> </div>
        <div class="col-md-4"> /*You can place the table in here*/ </div>
        <div class="col-md-4"> </div>
    </div>
</div>

以下是示例表代码：

<table>
    <thead>
        <tr>
          <th>header 1</th>
          <th>header 2 </th>
        </tr>
    </thead>
    <tbody>
        /*You could pull and add the data in here with <tr> and <td> using                   jQuery*/
    </tbody>
</table>

Answer 8

更新：从原始帖子中不清楚作者需要处理深层嵌套表。我相应地updated his JsFiddle。

这里是我之前写的一些jQuery代码，可以动态地将表转换为引导行和列。它假定表是对称的，没有colspan或rowspan属性。

将表转换为引导布局时的主要问题之一是正确处理标题行。如果所有标题单元格都使用th标记，则此jQuery代码将执行此操作。通过将find('th')替换为find('th,td')，您可以轻松地假设第一行上的任何内容都是标题。

最后，保留原始表的属性非常重要，例如id，类和onclick事件。以编程方式添加的任何事件都可能需要重新应用。

$('table:not(:has(table))').each(function() {
    debugger;
    var rowSelector = 'tr';
    var attributes = $.map(this.attributes,function(a,i) {
       return a.name+'="'+a.value+'"';
    }).join(' ');

    // handle collapsible headers
    var $headers = $('tr:first', this).find('th');
    var columns = $('tr:first',this).find('th,td').length;
    if ($headers.length > 0) {
        $headers.closest('tr').addClass('row visible-sm visible-md visible-lg');
        $headers.addClass('form-group  col-sm-' + Math.floor(12 / $headers.length)).wrapInner('<label></label>');
        rowSelector = 'tr:not(:first)';
    }
    // add classes to each data row
    $(rowSelector, this).addClass('row').each(function() {
        $('td,th', this)
            .addClass('form-group col-sm-' + Math.floor(12 / columns))
            .filter(function() {
               return $headers.length > 1;
            })
            .each(function (i) {
               // add collapsible headers to each row
               $(this).prepend('<label class="visible-xs">' + $($headers[i]).html() + '</label>');
            });
    });
    // convert input elements to bootstrap styled controls 
    $(':input', this).addClass('form-control').css('width', '');

    var divs = '<div class="container"><div '+attributes+'>'+$(this).html()
        .replace(/<\/{0,1}tbody>/gi, '')
        .replace(/<(tr|td|th)/gi, '<div')
        .replace(/<\/(tr|td|th)/gi, '</div')+'</div></div>';
    $(this).replaceWith(divs);
});

$('table').each(function() {
    var rewrite = $(this).html()
        .replace(/<(\/{0,1})table/gi, '<$1div')
        .replace(/<\/{0,1}tbody>/gi, '')
        .replace(/<(\/{0,1})(tr|td|th)/gi, '<$1div');
      $(this).replaceWith( rewrite );
});

鉴于此样本表

<table>
  <tr><th>First Name</th><th>Last Name</th><th>Address</th><th>City</th><th>State</th><th>Zip Code</th></tr>
  <tr><td>Jake</td><td>Elwood</td><td>1060 W Addison St</td><td>Chicago</td><td>IL</td><td>60613</td></tr>
  <tr><td>John</td><td>Wayne</td><td>18601 Airport Way</td><td>Santa Ana</td><td>CA</td><td>92707</td></tr>
</table>

以下引导标记的结果：

<div class="container">
<div class="row visible-md visible-lg">
    <div class="form-group col-md-2">
        <label>First Name</label>
    </div>
    <div class="form-group col-md-2">
        <label>Last Name</label>
    </div>
    <div class="form-group col-md-2">
        <label>Address</label>
    </div>
    <div class="form-group col-md-2">
        <label>City</label>
    </div>
    <div class="form-group col-md-2">
        <label>State</label>
    </div>
    <div class="form-group col-md-2">
        <label>Zip Code</label>
    </div>
</div>
<div class="row">
    <div class="form-group col-md-2">
        <label class="visible-xs visible-sm">First Name</label>
        Jake
    </div>
    <div class="form-group col-md-2">
        <label class="visible-xs visible-sm">Last Name</label>
        Elwood
    </div>
    <div class="form-group col-md-2">
        <label class="visible-xs visible-sm">Address</label>
        1060 W Addison St
    </div>
    <div class="form-group col-md-2">
        <label class="visible-xs visible-sm">City</label>
        Chicago
    </div>
    <div class="form-group col-md-2">
        <label class="visible-xs visible-sm">State</label>
        IL
    </div>
    <div class="form-group col-md-2">
        <label class="visible-xs visible-sm">Zip Code</label>
        60613
    </div>
</div>
<div class="row">
    <div class="form-group col-md-2">
        <label class="visible-xs visible-sm">First Name</label>
        John
    </div>
    <div class="form-group col-md-2">
        <label class="visible-xs visible-sm">Last Name</label>
        Wayne
    </div>
    <div class="form-group col-md-2">
        <label class="visible-xs visible-sm">Address</label>
        18601 Airport Way
    </div>
    <div class="form-group col-md-2">
        <label class="visible-xs visible-sm">City</label>
        Santa Ana
    </div>
    <div class="form-group col-md-2">
        <label class="visible-xs visible-sm">State</label>
        CA
    </div>
    <div class="form-group col-md-2">
        <label class="visible-xs visible-sm">Zip Code</label>
        92707
    </div>
</div>
</div>

Answer 9

表格用于表格数据。如果这是表中的内容，最好将它们保存为表。这是出于语义原因和可访问性（以及符合美国第508节）。您可以使用.table-responsive类来帮助它在移动设备上看起来更好，而不会破坏任何内容。还有其他一些方法可以使表格更具响应性，例如stackable和tablesaw。即使你转换为bootstrap的行和列，你也有一个12列的网格，如果它们的内容没有很好地修复，那么它将会有糟糕的用户体验。

Answer 10

var tablesYouWant = document.querySelectorAll("yourSelection"); //A selection of elements
for(var i = 0; i < tablesYouWantl i++){
    i.class += "classNames"; //Add Bootstrap classes to the elements
}

Answer 11

你应该使用bootstrap class table -responsive

添加这样的类

<div class="wrapper">
  
  <div class="content-a">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
    sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
    incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
    velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
  <img class="loader" src="//zuma-design.com/shared/so/loading-large.gif" />
</div>
<div class="wrapper">

  <div class="content-b">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
    sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
    incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
    velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
    <img class="loader" src="//zuma-design.com/shared/so/loading-large.gif" />
</div>
<div class="wrapper wrapper-c">

  <div class="content-c">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
    sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
    incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
    velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
    <img class="loader" src="//zuma-design.com/shared/so/loading-large.gif" />
</div>

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

11 个答案: