Вопрос по jquery – Используйте jQuery для преобразования таблицы в div и добавляйте th перед каждым тд

5

Я пытаюсь преобразовать все таблицы в div и добавить html или содержимое th из каждого td, который конвертируется в div.

Так что мой стол будет выглядеть так:

<table>
    <tr>
      <th>Title 1</th>
      <th>Title 2</th>
      <th>Title 3</th>
      <th>Title 4</th>
      <th>Title 5</th>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
      <td>Data 4</td>
      <td>Data 5</td>
    </tr>               
</table>

И я хочу преобразовать это так:

<div class="box">
<div class="row-fname"><span class="fname-label">TH Data</span> : <span class="fname-data">Data 1</span></div>
<div class="row-lname"><span class="lname-label">TH Data</span> : <span class="lname-data">Data 2</span></div>
<div class="row-address"><span class="address-label">TH Data</span> : <span class="address-data">Data 3</span></div>
<div class="row-city"><span class="city-label">TH Data</span> : <span class="city-data">Data 4</span></div>
<div class="row-state"><span class="state-label">TH Data</span> : <span class="state-data">Data 5</span></div>

Я нашел этот код, который почти работает, но может выяснить, как заставить его получить th, если есть какие-либо, и добавить их перед каждым диапазоном данных td.

$('.content table').replaceWith(function() {
    var html = '';

    $('tr', this).each(function() {         
        html += '<div class="box grey-bg">';
        $('th, td', this).each(function() {
            html += '<span>' + $(this).html() + '</span>';
        });
        html += '</div>';
    });

    return '<div class="">' + html + '</div>';
});

Любая помощь будет очень признательна!

Почему бы тебе не начать использовать div? nmford
Только что я использую этот код с этим ... var width = parseInt ($ (window) .width ()); if (ширина <= 320) Aaron
У меня есть необходимость преобразовать таблицу, которую я не могу настроить (с помощью динамического управления cms) на экранах, размер которых меньше 320 пикселей, и все решения адаптивных таблиц не подходят. Я знаю, что знаю очень странную просьбу, но я очень ценю любого, кто может мне помочь Aaron
Также приветствуются любые улучшения в скорости кода jQuery, которые у меня есть Aaron
Нет ничего плохого в том, что <table> используется для Табличной данные. В противном случае ссылка Nmford комментарий. Jason McCreary

Ваш Ответ

2   ответа
4

Это работает

$('.content table').replaceWith(function() {

    var $th = $(this).find('th'); // get headers
    var th = $th.map(function() {
        return $(this).text();
    }).get(); // and their values

    $th.closest('tr').remove(); // then remove them

    var $d = $('<div>', { 'class': 'box' });

    $('tr', this).each(function(i, el) {
        var $div = $('<div>', {'class': 'inner'}).appendTo($d);
        $('td', this).each(function(j, el) {
            var n = j + 1;
            var $row = $('<div>', {
                'class': 'row-' + n
            });
            $row.append(
            $('<span>', {
                'class': 'label-' + n,
                text: th[j]
            }), ' : ', $('<span>', {
                'class': 'data-' + n,
                text: $(this).text()
            })).appendTo($div);
        });
    });

    return $d;
});

демо вhttp: //jsfiddle.net/alnitak/UK395

@ Аарон, да, это может сработать - ценностьi в.each callback - номер текущего столбца, поэтому вы можете использовать его вместоtitles[i]. Alnitak
Очень хорошо! А что если я не знаю, сколько будет столбцов или имен? может быть, увеличить его численно? Aaron
если вы добавляете больше tr с помощью td, то заголовок перед ними не добавляется. Только добавляет это к первым. Любые идеи, и это тоже отличное решение! Aaron
@ Аарон, твой пример показал только один. Дай мне 5 минут.. Alnitak
@ Аарон смотри обновленную скрипку на Jsfiddle.net / Альнитак / UK395, но вам нужно уточнить, должен ли быть дополнительный «ящик» для каждой строки или только один для всей таблицы. Alnitak
4

Добавлятьdata-name теги к каждому<th> чтобы различать названия полей:

<table>
    <tr>
        <th data-name="fname">Title 1</th>
        <th data-name="lname">Title 2</th>
        <th data-name="address">Title 3</th>
        <th data-name="city">Title 4</th>
        <th data-name="state">Title 5</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
        <td>Data 4</td>
        <td>Data 5</td>
    </tr>               
</table>​

И попробуйте код ниже. По крайней мере, вы получите именно ту структуру, которая вам нужна.

$("table").replaceWith(function() {
    var block = $("<div />").addClass("box");
    $("tr:first th", this).each(function() {
        var name = $(this).data("name");
        var spanLabel = $("<span />").addClass(name + "-label").html(this.innerHTML);
        var spanData = $("<span />").addClass(name + "-data");
        $("<div />").addClass("row-" + name).append(spanLabel, " : ", spanData).appendTo(block);
    });
    $("tr:last td", this).each(function(index) {
        block.children("div:eq(" + index + ")").children(":last").html(this.innerHTML);
    });
    return block;
});

DEMO: http: //jsfiddle.net/BsUVA

ОБНОВИТЬ Если вы не можете добавить дополнительныеdata приписывает<th> теги, нет большой проблемы. Чтобы не было жесткого кодирования, мы можем переместить имена в массив (как показано ниже) и использовать его вместо этого.

var names = [
    "fname",
    "lname",
    "address",
    "city",
    "state"
];

DEMO: http: //jsfiddle.net/BsUVA/1

Это невероятно круто, но, к сожалению, я не могу добавить имя-данных = к. Таблица генерируется динамически cms и представляет собой стандартную обычную таблицу jane. : Aaron
@ Aaron Нет проблем, вы можете использовать массив имен. Проверьте обновление! VisioN
@ Аарон, я уверен, ты найдешь выход с этой отправной точкой. Добро пожаловать : VisioN
ооо, спасибо большое за быстрый ответ и помощь !!! ты ROCK VisioN !!! Aaron
Вау! ты офигенно крутой! Единственная проблема, которую я не всегда знаю, что или сколько это будет. Я поражен тем, как быстро вы придумали это решение !!! Aaron

Похожие вопросы