Question

我正在尝试使用数组中的数据将行附加到可编辑的表中。为了做到这一点，我添加了一行，然后利用保存功能来操作行的s。我的HTML表是：

<table id="tblData" class="table table-hover">
    <thead>
        <tr>
            <th>Date</th>
            <th>Time</th>
            <th>Treatment Number</th>
            <th>Cell Number</th>
            <th>Waste Container Number</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

由于数组数据将被输入到最近添加的行中，我只是使用下面的代码访问了该行，但是现在我正在努力访问实际的单元格。我目前的代码是：

function UpSave(rowData) {
    var tblData = document.getElementById("tblData");
    var lastRow = tblData.rows[tblData.rows.length - 1 ];
    var tdDate = lastRow.children("td:nth-child(1)"); 
    var tdTime = lastRow.children("td:nth-child(2)"); 
    var tdTreatmentNum = lastRow.children("td:nth-child(3)"); 
    var tdCellNum = lastRow.children("td:nth-child(4)");
    console.log(par); 
    var tdWasteContNum = lastRow.children("td:nth-child(5)");
    var tdButtons = lastRow.children("td:nth-child(6)");

    tdDate.html(tdDate.children(data[rowData][0])); 
    tdTime.html(tdTime.children(data[rowData][1]));
    tdTreatmentNum.html(tdTreatmentNum.children(data[rowData][2]));
    tdCellNum.html(tdCellNum.children(data[rowData][3]));
    tdWasteContNum.html(tdWasteContNum.children(data[rowData][4]));
    tdButtons.html("<img src='trash.png' class='btnDelete'><img src='pencil.png' class='btnEdit'><img src='up.png' class='btnUp'><img src='down.png' class='btnDown'>"); 
};

但变量末尾的.children无效。有什么想法，而不是为了访问行中的那些单元格？

（数据是包含I＆＃39; m放入的文本的数组）

Answer 1

在您执行原始getElementById时，看起来您从未明确定义变量tblData。 ~~将其添加到~~替换函数中的第一行：

    var tblData = document.getElementById("tblData");

添加引用会将DOM中的表绑定到变量，然后你可以完成其余的工作。

使用jQuery修改答案：

    var $tblData = $("#tblData");
    var $lastRow = $tblData.find('tr').last();
    var $tdDate =  $lastRow.find('td').eq(1); 
    var $tdTime =  $lastRow.find('td').eq(2);
    var $tdTreatmentNum = $lastRow.find('td').eq(3);
    var $tdCellNum = $lastRow.find('td').eq(4);
    //console.log(par); 
    var $tdWasteContNum = $lastRow.find('td').eq(5);
    var $tdButtons = $lastRow.find('td').eq(6);


    $tdDate.html(data[rowData][0]); 
    $tdTime.html(data[rowData][1]);
    $tdTreatmentNum.html(data[rowData][2]);
    $tdCellNum.html(data[rowData][3]);
    $tdWasteContNum.html(data[rowData][4]);
    $tdButtons.html("<img src='trash.png' class='btnDelete'/><img src='pencil.png' class='btnEdit'/><img src='up.png' class='btnUp'/><img src='down.png' class='btnDown'/>");

但是，如果您仍想使用纯JavaScript，请尝试更改

   .children("td:nth-child(x)");

到

    .childNodes[x];

编辑注释：我更改了.html（...）函数调用的内部，所以只需直接使用数组。以前我只是复制/粘贴了该部分的OP代码。

使用JavaScript在HTML表中访问

1 个答案: