As usual, I was playing around with my new project, implementing something similar to Google Suggests for country/city suggestions, after using Google Map Geolocation.
Basically the idea was to see a dynamic html table underneath every country/city text field, that suggests the possible values the user is typing.
Everything is generated appending child elements through javascript and removing them when needed.
As usual no problems with Firefox, but I had to battle a lot to understand the problem with Internet Explorer.
Basically the code was correctly appended inside the right element, but wasn’t visible using IE!
I could for example alert the innerHTML of the newly created table, but still couldn’t see it on the browser output.
The code I was using was:
// creating table
var mytable = document.createElement('table');
mytable.setAttribute('id','this_table_id');
mytable.className = 'my_class';
// creating row
var tr = document.createElement('tr');
tr.className = 'new_row';
tr.onclick = function() { do_something(); }
// creating td
var td = document.createElement('td');
td.innerHTML = "My Td Content";
// adding the td inside the row
tr.appendChild(td);
// adding the row inside the table
mytable.appendChild(tr)
var body = document.getElementById('my_page_body');
// adding the new table inside the page body
body.appendChild(mytable);
After few tests and headaches, I had a quick look at MSDN website and noticed that a lot of examples had the “tbody” tag in each generated table, why? Let’s try…
It worked! Internet Explorer needs the “tbody” tag for a table created through javascript to be visible! Crazy stuff.
The working code will look like:
// creating table
var mytable = document.createElement('table');
mytable.setAttribute('id','this_table_id');
mytable.className = 'my_class';
// creating tbody tag
var tbody = document.createElement('tbody');
// creating row
var tr = document.createElement('tr');
tr.className = 'new_row';
tr.onclick = function() { do_something(); }
// creating td
var td = document.createElement('td');
td.innerHTML = "My Td Content";
// adding the td inside the row
tr.appendChild(td);
// adding the row inside the tbody
tbody.appendChild(tr);
// adding the tbody inside the table
mytable.appendChild(tbody)
var body = document.getElementById('my_page_body');
// adding the new table inside the page body
body.appendChild(mytable);
Yes, I agree that the tag tbody is part of the w3c standard, but on HTML 4.01 W3C standards it is stated the following:
The TBODY start tag is always required except when the table contains only one table body and no table head or foot sections. The TBODY end tag may always be safely omitted.
What does it mean? I didn’t need the tbody, and IE forced me to use it! It CAN’T be safely omitted 
Another thumb down for IE.
Recent Comments