Мобильные столы - Jquery, так близко, застрял на последней части

Question

Мобильные столы - Jquery, так близко, застрял на последней части

0

Я пытаюсь создать сценарий, чтобы сделать мои таблицы приложений более мобильными.

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

Я предлагаю посмотреть скрипт js: http://jsfiddle.net/e4vC3/1/

Вот часть скрипта, которая работает неправильно:

// Create content for new headers in mobile table by copying from original table
var HeaderArray = [];
$("table thead tr th").each(function(){
 var innerArray = [];
    $(this).each(function () {
        innerArray.push($(this).text());
    });
     HeaderArray.push(innerArray); // Put content for new headers in array
});

$("table.mobile_table tbody tr").each(function(index, elem){ // Place content of array where array position and row index are the same
    $(this).find("td").first().text(HeaderArray[index]);
});

Опять же, если вы проверите скрипку, вы увидите, что первый arry перестает копировать объекты после первой таблицы, я не могу заставить его работать полностью.

Если бы кто-нибудь мог помочь мне с ними, я бы действительно, очень ценю это..... http://jsfiddle.net/e4vC3/1/

Mark 03 янв. 2014, в 21:59

Источник

Теги:

javascript

jquery

html

3 ответа

Ещё вопросы

ghopst · Answer 1 · 2014-01-03T18-55-00.000Z

Проблема в том, что есть несколько строк данных, а только 1 строка заголовка. Таким образом, вам придется использовать оператор mod, подобный этому (индекс был заменен индексом% TableSize):

    $("table.mobile_table tbody tr").each(function(index, elem){ // Place content of array where array position and row index are the same
    $(this).find("td").first().text(HeaderArray[index % TableSize]);
});

Souvik Banerjee · Answer 2 · 2014-01-03T19-02-00.000Z

Обновленный код @http://jsfiddle.net/souviiik/e4vC3/4/, см., Если это полезно. Для первой mobile_table я не смог установить значения TH, надеюсь, вы сможете изменить мой код :)

var TableSize = $("#ContactsPhoneTable .tableHedaer").size(); // Get # of columns
var i = 1;
var TableRowCount = $(".no_edit").size(); // Get # of body rows
$(".tableHedaer").each(function () {
    $(this).attr("id", i++); // Give headers incrementing ID
});

for (var CreateTables = 1; CreateTables < TableRowCount; CreateTables++) { // Create new table class="mobile_table" for each row 
    $("table").after("<table class='mobile_table'></table>");
}

for(var i = 0 ; i < TableSize ; i++)
{
    var tableRow = $("<tr/>").appendTo(".mobile_table");
    for(var j = 0 ; j < TableRowCount ; j++)
    {
        var cellValue = $("#ContactsPhoneTable").find("tr").eq(i).find("td").eq(j).text();
        $("<td/>", {
            text: cellValue
        }).appendTo(tableRow);
    }
}

Спасибо, что попробовали, но не то, что я искал, похоже, вы просто отбросили раздел thead и, возможно, последний столбец, и повторили это несколько раз. В моем примере я создаю новую таблицу, в которой каждая строка состоит из заголовка исходной таблицы и соответствующего ей содержимого. Взгляните на api.jquerymobile.com/table-reflow и посмотрите, что происходит с их таблицами, когда вы выбираете мобильный браузер по ширине, это то, что я пытаюсь выполнить. Еще раз спасибо за вашу попытку!
Добавляют ли они новую таблицу для каждой строки, когда таблица сжимается?
Да, это делает кучу мини столов для каждого ряда. Первый столбец каждой строки - это исходные таблицы <th>

Souvik Banerjee · Answer 3 · 2014-01-03T18-38-00.000Z

Обновленный код находится по адресу http://jsfiddle.net/souviiik/b6QZT/2/, посмотрите, приемлемо ли это. Код выглядит следующим образом.

var columnCount = $("table thead tr th").not("table.mobile_table thead tr th").size(); // Get # of columns
var rowCount = $("table tbody tr").size(); // Get # of body rows

for (var CreateTables = 0; CreateTables < rowCount; CreateTables++) { // Create new table class="mobile_table" for each row 
    $("<table/>", {
        "class": "mobile_table"
    }).appendTo(".newTableContainer");
}

var tableHedaers = [];

for(var th = 0 ; th < columnCount ; th++)
{
    tableHedaers.push($(".sortable th").eq(th).text());
}

$(".mobile_table").each(function(idx){
    var thisTable = $(this);
    for(var i = 0 ; i < columnCount ; i++)
    {
        var thisTableRow = $("<tr/>").appendTo(thisTable);
        for(var j = 0 ; j < 2 ; j++)
        {
            if(j == 0)
            {
                $("<td/>", {
                    "text": tableHedaers[i],
                    "style": "font-weight: 700"
                }).appendTo(thisTableRow);
            }
            else
            {
                var cellValue = $("#ContactsPhoneTable").find("tr").eq(idx+1).find("td").eq(i).text();

                $("<td/>", {
                    "text": cellValue
                }).appendTo(thisTableRow);
            }
        }
    }
});

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