adding cells to existing rows using Javascript

Question

I have a pre-defined table with all rows hidden like this:

<tr id="row1" style="display: none;">
</tr>
<tr id="row2" style="display: none;">
</tr>
<tr id="row3" style="display: none;">
</tr>
<tr id="row4" style="display: none;">
</tr>
<tr id="row5" style="display: none;">
</tr>
<tr id="row6" style="display: none;">
</tr>

I am trying to use Javascript to add cells to each row and then show it. My javascript currently gets the row id and at the end it will show that row. but I can't figure out how to add cells to it, here my function:

function CreateTable(numberOfLines, linesCollection, displayCollection) {
            for (var i = 0; i < numberOfLines; i++) {
                var rowId = 'row' + (i + 1);
                var row = document.getElementById(rowId);


                document.getElementById('row' + (i + 1)).style.display = "";

          }
        }

You want createElement and appendChild

Marc B
– Marc B

2013-08-06 15:52:24 +00:00
Commented Aug 6, 2013 at 15:52 — Marc B
– Marc B, Commented Aug 6, 2013 at 15:52

Satpal · Accepted Answer · 2013-08-06 15:54:08Z

2

Try this

var row = document.getElementById(rowId);
var TD = document.createElement('td'); //Create new cell
TD.innerHTML = 'This is a new cell added'; //Set some thing
row.appendChild (TD); //Add it to row

answered Aug 6, 2013 at 15:54

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

1 Comment

laitha0 Over a year ago

is there a way to delete that child in a different JavaScript?

Collectives™ on Stack Overflow

adding cells to existing rows using Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related