javascript error, cannot add cells to table row

Question

Here is my HTML code:

<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>

and this is the 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>`;
}

This the javascript is somehow not working. The row was added, but there was no cells added. Do you know what is the missing steps? The link button "Add Item" is not working.

https://jsfiddle.net/L09up1rj/

Is there any more appropriate way to do this?

The KNVB · Accepted Answer · 2020-11-13 02:52:16Z

2

Replace all cell.innerHtml with cell.innerHTML.

answered Nov 13, 2020 at 2:52

The KNVB

3,8523 gold badges35 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

mjb Over a year ago

omg.... The problem fixed. a small mistake... ah.....

The KNVB Over a year ago

Can you give me a tick?

mjb Over a year ago

I tried, but the system says, "You can accept an answer in 6 minutes"

mjb Over a year ago

I definitely will tick it after 6 minutes :)

mjb Over a year ago

I was stuck and trying to debug this for quite some time. even a try catch block will not pop up any error message. ah.... didn't notice the Html must be HTML.

|

Collectives™ on Stack Overflow

javascript error, cannot add cells to table row

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related