Question

我正在尝试动态创建一个表......它几乎可以正常工作，但我对它添加的单元格数量有疑问。

我的表有8列（星期一到星期五加上最后一栏）。

如您所见，在第1行，它将8列添加3次，然后在第2行添加两列，仅在最后一行添加8列。

我怀疑是因为我使用.append添加行如下（小提琴中的第105行）但我的Javascript非常有限，我不完全确定如何使它停止将列添加到第1行和第2行。

$("#timesheetTable > tbody").append('<tr id="' + sourceTableRowID + '" data-tt-id="' + sourceTableRowID + '" class="timesheetRow row' + rowIndex2 + '"></tr>');

如何在将单元格（td）循环到rowIndex2并将其递增时将其添加到下一行？

有人可以指出我正确的方向吗？

Answer 1

你在循环中有一个循环 - 这导致了额外的单元格。这是一个更新的 fiddle ;这是修改后的代码的摘录：

function createSampleRows() {
    var sourceTable = document.getElementById('activityTable');
    var sourceTableRows = sourceTable.rows.length;
    var targetTable = document.getElementById('timesheetTable');
    var rowindex;
    var targetTableColCount;

    for (var rowIndex = 0; rowIndex < targetTable.rows.length; rowIndex++) {
        if (rowIndex == 1) {
           targetTableColCount = targetTable.rows.item(rowIndex).cells.length;
           continue; //do not execute further code for header row.
        }
    }
    for (rowIndex = 0; rowIndex < (parseInt(sourceTableRows)-2); rowIndex++) {
        var sourceTableRowID = document.getElementsByClassName('activityTaskRow')[rowIndex].id;
        $("#timesheetTable > tbody").append('<tr id="' + sourceTableRowID + '" data-tt-id="' + sourceTableRowID + '" class="timesheetRow row' + rowIndex + '"></tr>');

    };

    // This loop was nested within the above loop
    for (x = 0; x < targetTableColCount; x++) {
        $("#timesheetTable > tbody > tr").append('<td id="' + x + '" style="width: 60px;height: 34px;" class=""></td>');
    };
};

使用Javascript在表中创建行 - 添加太多单元格...＆gt;

1 个答案: