JavaScript 错误，无法将单元格添加到表格行

Question

这是我的 HTML 代码：

<input type='hidden' id='hiddenRowId' value='0' />

<a href='#' onclick='addItem(); return false' class='buttonAdd'>Add Item</a>

<table id='tb1'>

    <tr>

        <th>No</th>

        <th>Seq</th>

        <th>Item Name</th>

        <th>Compulsory</th>

        <th>Fixed Qty</th>

        <th>Qty</th>

        <th>Unit Price</th>

        <th></th>

    </tr>

</table>

这是 JavaScript：

function addItem() {

    hiddenRowId = document.getElementById('hiddenRowId');

    let rowid = parseInt(hiddenRowId.value);

    if (isNaN(rowid)) {

        rowid = 0;

    }

    rowid--;

    hiddenRowId.value = rowid;

    let tb1 = document.getElementById('tb1');

    let tr = tb1.insertRow(-1);

    tr.id = "tr" + rowid;

    let cell1 = tr.insertCell(-1);

    let cell2 = tr.insertCell(-1);

    let cell3 = tr.insertCell(-1);

    let cell4 = tr.insertCell(-1);

    let cell5 = tr.insertCell(-1);

    let cell6 = tr.insertCell(-1);

    let cell7 = tr.insertCell(-1);

    let cell8 = tr.insertCell(-1);

    cell2.innerHtml = `<input type='text' name='txt_${rowid}_seq' value='' style='width: 40px;' />`;

    cell3.innerHtml = `<input type='text' name='txt_${rowid}_name' value='' style='width: 300px;' />`;

    cell4.innerHtml = `<input type='checkbox' name='txt_${rowid}_compulsory'  />`;

    cell5.innerHtml = `<input type='checkbox' name='txt_${rowid}_fixqty'  />`;

    cell6.innerHtml = `<input type='text' name='txt_${rowid}_qty' value='1' style='width 40px;' />`;

    cell7.innerHtml = `<input type='text' name='txt_${rowid}_unitprice' value='' style='width: 80px;' />`;

    cell8.innerHtml = `<a href='#' onclick='remove(${rowid}); return false;' class='buttonmain'>Delete</a>`;

}

javascript 不知何故无法正常工作。添加了行，但没有添加单元格。你知道缺少什么步骤吗？“添加项目”链接按钮不起作用。

https://jsfiddle.net/L09up1rj/

有没有更合适的方法来做到这一点？

Answer 1

将所有 cell.innerHtml 替换为 cell.innerHTML。