Javascript Dynamic Tables in Internet Explore

January 3, 2011 at 09:47:49
Specs: Windows XP
I am new at Javascript and I have been attempting to create a dynamic table. It works fine in google Chrome, but not in Internet Explorer. I read that I need to incorporate the tbody element and I felt like I have, but it still does not work for me. The script is generating tables (with a header) and are being utilized with the google earth plugin. The header opens up fine but the table never shows up. Any help is appreciated. I have attached what I have done below (including the header that does work). Thanks.

function generateSCRContent(source) {
var div = document.createElement("div");
div.className = "displayDiv"; = "text-align:center";
div.width = 520;

//This is the logo at the top (header)
var logo = document.createElement("img");
logo.src = "Add_your_logo_here.gif";

var id = document.createElement("p"); = "font-size: larger; font-weight: bold; text-decoration: underline;";
id.innerText =;

var description = document.createElement("p"); = "font-weight: bold; font-style: italic;";
description.innerText = (source.loc_descr);

var genInfo = document.createElement("p"); = "font-weight: bold;";
genInfo.innerText = ("General Information");
//End of Header

//Start of Dynamic Table that I can't get to work
var infoTable = document.createElement("table");
infoBody = document.createElement("tbody"); = "border-collapse: collapse; margin-left: auto; margin-right: auto;";
function addInfoRow(caption, data) {
var row = document.createElement("tr");
row.innerHTML = "<td style='border: 1px solid black;'>" + caption + "</td><td style='border: 1px solid black;'>" + data + "</td>";

addInfoRow("Point ID",;
addInfoRow("Location Description", source.loc_descr);
addInfoRow("Date of Visit",;
addInfoRow("Longitude", source.lon);

//This little snipit just says if there is no value in the table for this skip the row
if (source.notes != "") {
var spacer = document.createElement("tr");
spacer.innerHTML = "<td colspan=2 style='border: 1px solid black; background-color: #a0a0a0;'></td>";

addInfoRow("Video File", source.notes);


return div;

See More: Javascript Dynamic Tables in Internet Explore

Report •

January 4, 2011 at 12:07:26
Just a guess - it doesn't look like you're adding the elements to tbody (you're adding them to the table)

i.e., in addInfoRow:


should be:

Then after the body is created:


By the way, you should really use a javascript framework for doing this, the syntax is so much cleaner.

i.e., using jQuery, creating a table would look like:

var table = $('<table />'); 
var tbody = $('<tbody />'); 
var tr = $('<tr />'); 




Cleaner and easier to read. Look at the demo's in the API docs:

Report •
Related Solutions

Ask Question