SweetVision Javascript and other web programming topics

The correct way to work with table elements in FireFox, IE and all other browsers

In my last post I talked about the differences between IE and Firefox when creating dynamic tables with the Document Object Model. Thanks to chatdor’s comment to my “Dynamic Tables In JavaScript for IE and Firefox” post, I realized that I was not paying attention to the full DOM. Perhaps many of us, like me, tend to only think of the Element object when thinking about manipulating the DOM, but there are a couple of higher level objects that derive from the Element object, the Table Element, and the Form Element, that make dealing with the more complex Elements easier. The good folks over at Mozilla have a great DOM reference which I almost always have open.

So, all that being said, I would like to post some code on a better way of creating dynamic tables in JavaScript with the DOM. In the following block of code we will use createElement(‘table’), to create our table but from then on we will use the Table Element’s member function insertRow and the Row’s insertCell to build the table.

1
2
3
4
5
var myTable = document.createElement('table');

var myRow = myTable.insertRow(-1);

var myCell = myRow.insertCell(-1);

var myTextNode = document.createTextNode('Hello World!');

myCell.appendChild(myTextNode);

In this block, I pass -1 into the insert functions to append the row or cell to the end of the rows or cells. Also in the example instead of setting the cell’s innerHTML or useing createElement(“text”) to make a text node and append, I instead use document.createTextNode, which is another case where there is a DOM function that is likely better to use than the less specific functions.

By using the higher level Table object and calling functions more specific to an action the code should have better cross-browser functionality.

               

Dynamic Tables In JavaScript for IE and Firefox

Edit : After reading chatdor’s comment I realized that I was consentrating so much on the Element that I was not seeing the whole DOM. See my new post on the DOM, for a better sample for creating table elements in JavaScript.

Recently I had the “pleasure” of dynamic creating some tables in JavaScript. In the process, I ran into and interesting issue or two. The first issue is that you cannot just append <tr> elements into a <table> element in IE. It will work, but IE will not render the rows. In IE you must create a <tbody> element, append the <tbody> element to the <table> element, then append your rows to your <tbody> element. This does not follow the W3C Row groups specification for the table specification which states that: “Table rows may be grouped into a table head, table foot, and one or more table body sections, using the THEAD, TFOOT and TBODY elements, respectively.” Note that the W3C specification states ‘may be’ whereas IE treats it as “must be.”

So, the following will get you nothing in IE but will work fine in Firefox:

1
2
3
4
5
6
var myTable = document.createElement("table");

var myRow = document.createElement("tr");

var myCell = document.createElement("td");

myCell.innerHTML = "Hello World!";

myTable.appendChild(myRow);

myRow .appendChild(myCell);

This will render a table in both IE and Firefox:

1
2
3
4
5
6
7
8
var myTable = document.createElement("table");

var myTbody = document.createElement("tbody");

var myRow = document.createElement("tr");

var myCell = document.createElement("td");

myCell.innerHTML = "Hello World!";

myTable.appendChild(myTbody);

myTbody.appendChild(myRow);

myRow.appendChild(myCell);

So now we have a table that renders in both IE and Firefox but there is still an issue remaining. Now in Firefox there is a space between the top of the table and the first row that you cannot get rid of. This is not going to be evident in all situations but will be in enough situations to be a problem. The reason for the space is that when you add a <tbody> to a table in Firefox it appears to reserve or auto include the <thead> and <tfoot> elements in the table. This is most likely done because the W3C specification states that you must have a <thead> and <tfoot> if you have a <tbody>. In order to prevent this extra space you need to add the<thead> and the <tfoot> and set their height to 0px or their display to none or something of the sort unless, of course, you are going to use them.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var myTable = document.createElement("table");

var myThead = document.createElement("thead");

myThead.style.height = 0px;

var myTfoot = document.createElement("tfoot");

myTfoot.style.height = 0px;

var myTbody = document.createElement("tbody");

var myRow = document.createElement("tr");

var myCell = document.createElement("td");

myCell.innerHTML = "Hello World!";

myTable.appendChild(myThead);

myTable.appendChild(myTfoot);

myTable.appendChild(myTbody);

myTbody.appendChild(myRow);

myRow.appendChild(myCell);

This gives you a way to render tables that match in both IE and Firefox with the same code.