Adding rows in HTML table using javascript

Question

I am trying to insert rows into an html table with javascript. I have the table created and can add rows successfully with the click of a button. However, I want to be able to populate the rows with elements from several arrays on load. The button is just to make sure the rows are being added.

<html>
 <input type="button" value="Add row" onclick="javascript:appendRow()"     class="append_row"/>
 <br/><br/></p>
 <table id="my_table" align="center" cellspacing="0" cellpadding="0" border="0">
 <tr>
<td>Name</td>
<td>Age</td>
 <td>Sex</td>
 </tr>

</table>
<p></center></p>

 <script type="text/javascript" language="javascript">
 function appendRow(){


var names = ["Paul", "Mike", "Linda"];
var ages = ["16", "23", "44"];
var male_female = ["M", "M", "F"];
var tbl = document.getElementById('my_table'); // table reference
// append table row
var row = tbl.insertRow(tbl.rows.length);

// insert table cells to the new row
   var row = tbl.insertRow();

for(var i=0;i<tbl.rows[0].cells.length;i++)
    createCell(row.insertCell(i), i, 'row');

 }

function createCell(cell, text, style){
var div = document.createElement('div'); // create DIV element
var txt = document.createTextNode(text); // create text node
div.appendChild(txt);                    // append text node to the DIV
div.setAttribute('class', style);        // set DIV class attribute
div.setAttribute('className', style);    // set DIV class attribute for IE (?!)
cell.appendChild(div);                   // append DIV to the table cell
}
</script>
<style>
 .row{background-color:#FFD6D6;width:43px;margin:3px;}
 .col{background-color:#D6FFD6;width:43px;margin:3px;}
  table#my_table{border-collapse:collapse;}
    table#my_table td{width:50px;height:27px;border:1px solid #D3D3D3;font-  size:10pt;text-align:center;padding:0;}
   .append_row{background-color:#FFD6D6;border:1px #ccc solid;}
   .append_column{background-color:#D6FFD6;border:1px #ccc solid;}
   .delete{background-color:#eee;border:1px #ccc solid;}
   </style>
   </html>

re the setAttribute call and IE hack: don't use getAttribute/setAttribute in an HTML document, for this reason. Better stick to the DOM Level 1 HTML properties like div.className= style. — bobince
– bobince, Commented Sep 17, 2010 at 0:22

Matthew Smith · Accepted Answer · 2010-09-17 00:29:35Z

3

In your for loop, try something like:

var j = tbl.rows.length - 1;
for (var i=0;i<tbl.rows[0].cells.length;i++) {
  var cell_text = '';
  if (i == 0) {
     cell_text = name[j];
  } else if (i == 1) {
     cell_text = ages[j];
  } else if (i == 2) {
     cell_text = male_female[j];
  }
  createCell(row.insertCell(i), cell_text, 'row');

 }

answered Sep 17, 2010 at 0:29

Matthew Smith

6,2856 gold badges38 silver badges36 bronze badges

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

2 Comments

cameron213 Over a year ago

Seems to work for the most part. It starts with the 2nd element of the array, but does put everything where it need to be. thanks for the help. Is there a way to make it create a number of rows based on the number of elements in the array or the length? I'm going to be using this with arrays of unknown length and need it to populate accordingly.

Matthew Smith Over a year ago

I guess you need j = tbl.rows.length - 2 to account for the header row. You could use an outer for loop: for (var j=0;j<name.length;j++) assuming the three arrays are the same length every time.

Oren · Accepted Answer · 2010-09-17 00:28:03Z

1

You forgot the "body" tag in the HTML syntax. You can put a call to your function in the onLoad variable, so it will be called after the page with loaded.

answered Sep 17, 2010 at 0:28

Oren

2,8373 gold badges27 silver badges39 bronze badges

1 Comment

cameron213 Over a year ago

Yeah I left out that code for now until I see that its actually working. I'm looking for the code to put those elements in the rows.

Collectives™ on Stack Overflow

Adding rows in HTML table using javascript

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related