Question

191

Adding content to a table row (< TR>) with javascript?

rated 0 times [ 195] [ 4] / answers: 1 / hits: 35966 / 14 Years ago, tue, january 25, 2011, 12:00:00

I have a table as follows:

<table>

 <tr>

   <td>col 1</td><td>col2</td>

 </tr>

 <tr id=insert>

   <td>field</td><td>Field 2</td>

 </tr>

 <tr>

   <td>another field</td><td>one more field</td>

 </tr>

</table>

Now the issue is that I need to dynamically insert new rows AFTER the middle row (id = insert). I have a custom javascript function to insert elementsAFTER an element by using an insertBefore call on the next element.

The new rows create successfully using the following javascript:

var new_row = document.createElement('tr');

new_row.innerHTML=<td>test</td>;

insertAfter(document.getElementById(insert), new_row);

However, the new row refuses to accept any simple html formatting using the innerHTML. The final output of the new row looks something like:

<tr>test</tr>

You see it doesn't want to output the I have specified. The actual script is a lot more complex and so unfortunately manually adding each using an appendChild or similar function would be far too time consuming and probably rather resource intensive. Is there anyway I can just add a 'chunk of html' to this table row and in this chunk define the table columns?

I'm baffled, any help is MUCH appreciated.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

samara

Add To Favorites

Follow

Total Points: 326

Total Questions: 106

Total Answers: 103

Location: Cook Islands

Member since Thu, May 21, 2020

4 Years ago

answered 14 Years ago katianatasham · Accepted Answer

You can use the native insertCell() method to insert cells.

Give this a try:

Example: http://jsfiddle.net/VzTJa/

var new_row = document.createElement('tr');

new_row.insertCell(0).innerHTML = test;

new_row.insertCell(1).innerHTML = test2;

or you can accomplish it without your insertAfter() function by using insertRow() as well.

Example: http://jsfiddle.net/VzTJa/1/

var insert = document.getElementById(insert);

var new_row = insert.parentNode.insertRow( insert.rowIndex + 1 );

new_row.insertCell(0).innerHTML = test;

new_row.insertCell(1).innerHTML = test2;

Give this workaround a try:

Example: http://jsfiddle.net/VzTJa/2/

var temp = '<table><tbody><tr>';

var close_temp = '</tr></tbody></table>';

var temp_div = document.createElement('div');





var html_to_insert = '<td>tester</td><td>tester</td>';



temp_div.innerHTML = temp + html_to_insert + close_temp;

insertAfter(document.getElementById(insert), temp_div.firstChild.firstChild.firstChild);



temp_div.removeChild(temp_div.firstChild);

Basically creates a couple strings representing the opening and closing tags of a table. You concatenate it with your content, and set it as the innerHTMl of a temporary div, then fetch the row you want, and do an .appendChild().

There may be a better way, or you may find a way to improve this one.

I came up with this after glancing at a solution in this article from a guy who apparently worked on IE and is partly responsible for the parser.