Question

我正在尝试创建一个脚本，以使我的应用程序表更具移动性。

这些表都非常相似，但行数和列数非常多，因为它们将动态创建，我几乎无法控制它，所以我想出了下面的脚本，它几乎可以工作但是一个函数不会传递给每个表，它会在第一个函数后停止。

以下是无法正常运行的脚本：

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

Answer 1

问题是有多个数据行而只有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]);
});

Answer 2

更新了您的代码@ 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);
    }
}

Answer 3

更新的代码位于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);
            }
        }
    }
});

移动表 - Jquery，如此接近，卡在最后一部分

3 个答案: