Unsuccessfully to create dynamic rows in a table

@webdev1999Aug 02.2007

Hi,

I am trying unsuccessfully to create dynamic rows in a table by injecting html into the table.

There are a number of ways this can be done (creating object) but I must use html code.

I have created a simplified html version (below) to highlight the problem.

The problem is when I output the “rendered” html the row and cell begin tags are missing, this causes display problems.

Can anyone explain why this is happening?

Thanks in advance!!!

———————-

[code]
 <html>
 <body>
<table id=”main_table”>
 <tr>
 <td>cell1</td> 
 <td>cell2</td>
 </tr>
 <span id=”insert_after_here”>
 </span>
</table>
<script>
 var dynamicRowSpan = document.getElementById(“insert_after_here”);
dynamicRowSpan.insertAdjacentHTML(“afterEnd”,”<tr><td>cell3</td><td>cell4</td></tr>”);
var tb = document.getElementById(“main_table”);
 alert(tb.outerHTML);
 </script>

</body> </html> [/code]

————–

to post a comment

JavaScript

8 Comments(s) _↴

@KorAug 02.2007 — #never "injecting" HTML code if you intend to use the DOM tree later, javascript is not php or asp. You should create elements and append them.

Use DOM standard methods:

http://www.howtocreate.co.uk/tutorials/javascript/domtables

@steveaAug 02.2007 — #I've never heard of "insertAdjacentHTML" but I do know that you can't have a span within a a table tag outside of a cell. That is where your problem comes in. Here's a working example using both innerHTML and createElement:

[code=php]
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 <HTML>
 <HEAD>
 <TITLE> New Document </TITLE>
 <script type="text/javascript">
 window.onload = function(){
 var tbl = document.getElementById('theTable');
 //The innerHTML way:
 tbl.innerHTML += "<tr><td>Cell 3</td><td>Cell 4</td></tr>";
 //The other way:
 var tr = document.createElement('tr');
 var td5 = document.createElement('td');
 var td6 = td5.cloneNode(false);
 td5.appendChild( document.createTextNode('Cell 5') );
 tr.appendChild( td5 );
 td6.appendChild( document.createTextNode('Cell 6') );
 tr.appendChild( td6 );
 
  tbl.appendChild( tr );
 };
 </script>
 
 </HEAD>
 <BODY>
 
 <table id="theTable">
 <tr>
 <td>Cell 1</td>
 <td>Cell 2</td>
 </tr>
 </table>
 </BODY>
 </HTML>
 [/code]

Hope that helps!

@webdev1999authorAug 03.2007 — #Hi Stevea,

Thanks for the reply.

I have already tried that method and in Firefox it works but in IE I get a "Error: Unknown runtime error" on line 9 of your code, I think there is a bug in IE.

This is kind of a simplified down version of what I am trying to do. The reason I need to inject the html code is that I am making an asynchronous request to the server which then makes another request to an external site. The server then strips out the HTML code and sends it back to the page to be injected. This happens after user interaction which means I must use html injection and can't use dom.

Again, I have a feeling there is a bug in IE. aaaaaahhhhhhhhhhhh!!!!

I think what I will try next is to create a hidden iframe that will make the request to the server and once the request is complete I will extract the dom nodes and append it to the original document.

Thanks again!

@webdev1999authorAug 03.2007 — #never "injecting" HTML code if you intend to use the DOM tree later, javascript is not php or asp. You should create elements and append them.

Use DOM standard methods:

http://www.howtocreate.co.uk/tutorials/javascript/domtables[/QUOTE]

I don't intend to use the DOM "later", all I need is the page rendered correctly but can you explain why I must "never" inject HTML code?

Have a look at my reply to stevea below, you will get a better understanding of what I am trying to do!

Thanks for the reply!

@Orc_ScorcherAug 03.2007 — #So what does the HTML you get from the server look like? Is it one complete table row?

@webdev1999authorAug 03.2007 — #So what does the HTML you get from the server look like? Is it one complete table row?[/QUOTE]

Hi, it should contain multiple rows, but really any tag that could exist in a table.

@Orc_ScorcherAug 03.2007 — #This one should work as long as the HTML contains only rows or table bodies. As you see it doesn't have to be particularly well formed, as long as the browser's HTML parser can digg it, it's ok.

If you need to support more tags like thead or caption you'd have to extend the function to move these from the new table, too

&lt;table id="theTable" border="1"&gt;
 &lt;tr&gt;&lt;td&gt;First column&lt;td&gt;Second column
 &lt;/table&gt;
 &lt;script&gt;
 function insert_HTML_into_TABLE(table, html) {
 var div = document.createElement("div")
 div.innerHTML = "&lt;table&gt;" + html + "&lt;/table&gt;"
 var bodies = div.firstChild.tBodies
 while (bodies[0])
 table.appendChild(bodies[0])
 }
 
 window.onload = function () {
 var html_from_server = "&lt;tr&gt;&lt;td&gt;Row 2 A&lt;td&gt;Row 2 B&lt;tr&gt;&lt;td colspan='2'&gt;Row 3&lt;/tr&gt;" +
 "&lt;tr&gt;&lt;td rowspan='2'&gt;Rows 4 + 5 Column A&lt;td&gt;Row 4 B&lt;tr&gt;&lt;td&gt;Row 5 B" +
 "&lt;tbody&gt;&lt;tr&gt;&lt;td colspan=2&gt;Second body&lt;/tbody&gt;"
 insert_HTML_into_TABLE(document.getElementById("theTable"), html_from_server)
 }
 &lt;/script&gt;

@KorAug 03.2007 — #as you wish... But innerHTML is not a standard method, and it could bring problems even in IE....

Also in #JavaScript _↴

Data Validation Trouble Converting a script to use with jQuery instead of MooTools convert repetetive text into script

Success!

Help @webdev1999 spread the word by sharing this article on Twitter...

Tweet This

Unsuccessfully to create dynamic rows in a table

8 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Unsuccessfully to create dynamic rows in a table

8 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #JavaScript _↴