Преобразование таблиц HTML в начальные столбцы - Ревизионный дизайн

Ответ 1

Возможно, было бы трудно безошибочно преобразовать любую данную таблицу в столбцы начальной загрузки. Учтите, что в столбцах начальной загрузки допускается только до 12 столбцов, а таблица может иметь больше.

Эта функция преобразует таблицу в строки BS/cols, но предполагает, что количество строк таблицы равномерно делится на 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 к вашей таблице и поместит их в div .table-responsive, который поможет с отзывчивостью.

/**
 * 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)

Ответ 2

В OP: Вам нужно переписать свои таблицы во весь проект

В соответствии с вашим требованием вы не хотите перерабатывать ни одну из построенных таблиц, а также хотите преобразовать существующие таблицы в гибкие div.

Во-первых, чтобы дать решение, которое может работать на весь ваш проект, очень важно, чтобы все таблицы вашего сайта соответствовали тому же стандарту в его struture. Который я вижу со страницы входа в систему, это очень случайный момент.

Даже если вы напишете решение, которое может работать на экране, который вы предоставили (экран входа в систему), я не уверен, что этого будет достаточно для всего вашего сайта. Таблицы на вашем экране вложены в ядро. Вы никогда не знаете, что все может сломать, если вы возьмете это предложение.

Итак мое предложение. Что было сделано. Предыдущие разработчики использовали только таблицы для структурирования там страниц, но мир изменился на отзывчивость. И это изменится и в ближайшие несколько лет. Мы никогда не узнаем. Таким образом, ваше время для вас переписать все страницы в новую структуру HTML и обновиться до последнего возможного кода.

Для широкой публики:, которые хотят изменить таблицу на divs в соответствии с устройствами

Быстрая проверка: Рабочая скрипта (измените размер экрана результатов, чтобы увидеть эффект)

Насколько я понимаю требование, которое вы хотите показать table на средних и больших устройствах, но когда пользователь находится на маленьком устройстве или меняет размер экрана на маленький, то вы хотите отображать его по-другому. a div.

У меня есть решение, использующее встроенные классы начальной загрузки.

Решение:

• Создайте обе таблицы (которые вы показываете на средних и больших устройствах) и другую структуру HTML (которую вы хотите показать на небольших устройствах).

• Использовать bootstrap при условии, что Helper Classe, чтобы переключать отображение таблицы и другого раздела в соответствии с в окне просмотра.

  Вот привязка к Doc и 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

Надеюсь, это поможет!

Ответ 3

Я не думаю, что это "самая красивая" форма для решения вашей проблемы, но если вы можете использовать только CSS и jQuery, я думаю, вы можете просто разделить каждую часть данных таблицы, используйте $(...).hide(), чтобы сделать ее невидимой а затем используйте $(...).html(), чтобы поместить это содержимое в div Bootstrap.

Ответ 4

Я думаю, вам придется переписать весь html, если сайт основан на html-таблицах.

Если вы используете таблицы так же, как "обычные" таблицы, вы можете просто добавить class="table в таблицу

Кроме того, вы можете обернуть таблицу в div с помощью class="table-responsive"

например:.

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

есть еще несколько доступных стилей: table-hover table-striped... вы можете найти здесь несколько примеров: http://getbootstrap.com/css/#tables

Ответ 5

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>

Ответ 6

Вы можете использовать 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>

Ответ 7

UPDATE: Из первоначального сообщения было непонятно, что автору необходимо иметь дело с глубоко вложенными таблицами. Я обновил его JsFiddle соответственно.

Здесь некоторый код jQuery, который я написал некоторое время назад, который конвертирует таблицы в строки и столбцы начальной загрузки на лету. Он предполагает, что таблица симметрична, нет атрибутов colspan или rowspan.

Одна из основных проблем при преобразовании таблицы в макет начальной загрузки - правильно обрабатывать строку заголовка. Этот код jQuery будет делать это при условии, что все ячейки заголовка используют т-й тег. Вы легко могли бы предположить, что в первой строке был заголовок, заменив find('th') на find('th,td').

Наконец, важно сохранить атрибуты исходной таблицы, такие как id, classes и onclick events. Любые события, которые были добавлены программно, возможно, потребуется повторно применить.

$('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>

Ответ 8

Таблицы предназначены для табличных данных. Если это то, что есть в таблицах, лучше было бы хранить их в виде таблиц. Это связано с семантическими причинами, а также с доступностью (и соблюдением раздела 508 в США). Вы можете использовать класс .table-responsive, чтобы помочь ему выглядеть лучше на мобильном устройстве и не нарушать ничего. Есть и другие вещи, которые делают таблицы более отзывчивыми, например stackable и tablesaw, чтобы назвать несколько. Даже если вы конвертируете в строки и столбцы начальной загрузки, у вас есть сетка с 12 столбцами, если содержимое таблицы не исправляется там красиво, это будет плохой пользовательский интерфейс.

Ответ 9

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
}

Ответ 10

вам нужно добавить класс, подобный этому, используя таблицу классов bootstrap -responsive

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

Ответ 11

Я думаю, вы правы, что полный рефактор может стоить много работы. Однако я бы действительно подумал о том, чтобы позволить более разрешить это гибридное решение: почему бы не выбрать некоторые компоненты и не скомпоновать их. Старый продукт, который у вас есть, значительно улучшится, но не на 100% на первом этапе. Для деталей, которые не могут быть реорганизованы прямо сейчас, сделайте отличный план. Решения, упомянутые другими, отлично подходят к вашему вопросу, но я думаю, что в конце концов вы застрянете с неподъемным продуктом. И никто не выиграет от такого продукта, верно?