CODEWITHSUNDEEP
javascriptjqueryhtml
Mark
Mark

Reputation: 4873

Mobile Tables - Jquery, so close, stuck on the last part

I'm trying to make a script to make my applications tables more mobile friendly.

The tables are all very similar, but very in number of row and columns, since they will be dynamically created, I'll have little control over this, so i've come up with the script below, it almost works but one function is not be passed on to each table, it stops after the first.

I suggest looking at the js fiddle: http://jsfiddle.net/e4vC3/1/

Here is the piece of the script that is not working correctly:

// 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]);
});

Again, if you check the fiddle, you will see that the first arry stops copying objects after the first table, i cant get it to run all the way thought.

If anyone could help me with them, i would really, realy appreciate it..... http://jsfiddle.net/e4vC3/1/

Upvotes: 0

Views: 57

Answers (3)

ghopst
ghopst

Reputation: 166

The problem is that there are multiple data rows while only 1 header row. So, you will have to use mod operator like this(index has been replaced with index % 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]);
});

Upvotes: 1

Souvik Banerjee
Souvik Banerjee

Reputation: 197

Updated code is at http://jsfiddle.net/souviiik/b6QZT/2/, see if this is acceptable. The code is as below.

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);
            }
        }
    }
});

Upvotes: 0

Souvik Banerjee
Souvik Banerjee

Reputation: 197

Updated your code @ http://jsfiddle.net/souviiik/e4vC3/4/, see if this is helpful. For the first mobile_table I was not able to put the TH values, I hope you can modify my code :)

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);
    }
}

Upvotes: 0

Related Questions