javascript - 使用 Javascript 在表中创建行 - 添加了太多单元格...>

Question

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

我的表格有 8 列(周一到周五加上末尾的总计列)。

这是它的 fiddle :http://jsfiddle.net/kaf9qmh0/

如您所见，在第 1 行，它添加了 8 列 3 次，然后在第 2 行，它添加了两次列，只有在最后一行才添加了 8 列。

我怀疑这是因为我使用 .append 来添加行，如下所示( fiddle 中的第 105 行)，但我的 Javascript 非常有限，我不完全确定如何让它停止将列添加到第 1 行和第 2 行。

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

当循环遍历 rowIndex2 并递增它时，如何使其仅将单元格 (td) 添加到下一行？

有人能给我指出正确的方向吗？

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