javascript - 使用 JavaScript 访问 HTML 表中的 <td>

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 无效。为了访问行中的这些单元格，有什么想法吗？

(数据是包含我要放入的文本的数组)

Answer 1

看起来您在执行原始 getElementById 时似乎从未通过省略引号来明确定义变量 tblData。 将此添加到替换函数中的第一行:

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

添加引号会将 DOM 中的表绑定(bind)到变量，然后您就可以执行其余的操作。

使用 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 代码。