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.

<script>
function generateSCRContent(source) {
var div = document.createElement("div");
div.className = "displayDiv";
div.style.cssText = "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";
div.appendChild(logo);

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

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

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

//Start of Dynamic Table that I can't get to work
var infoTable = document.createElement("table");
infoBody = document.createElement("tbody");
infoTable.style.cssText = "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>";
infoTable.appendChild(row);
}

addInfoRow("Point ID", source.id);
addInfoRow("Location Description", source.loc_descr);
addInfoRow("Date of Visit", source.day);
addInfoRow("Latitude", source.lat);
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>";
infoTable.appendChild(spacer);

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

infoBody.appendChild(infoTable)
div.appendChild(infoBody);

return div;
}


See More: Javascript Dynamic Tables in Internet Explore

Report •

#1
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:

infoTable.appendChild(row);

should be:
infoBody.appendChild(row);

Then after the body is created:

infoTable.appendChild(infoBody); 


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 />'); 

tr.html('<td>One</td><td>Two</td>'); 

tbody.append(tr); 
table.append(tbody); 

table.appendTo('body'); 

Cleaner and easier to read. Look at the demo's in the API docs:
http://api.jquery.com/append/


Report •
Related Solutions


Ask Question