Unable to apply CSS style to table cell with Javascript

[ncbugeye]

I am relatively new to javascript and AJAX but have -l-o-n-g- experience with other languages over the last 35 years.

I am successfully downloading an XML file with AJAX and making it display on my page, almost the way I want it.

My problem is I can't find a way to apply a CSS style to a table cell created in a row with insertRow/insertCell. I tried using setAttribute and I tried the className property. In the fragment below, the "msie" variable is set when I detect which kind of xmlHttpRequest I make, and "headcell" is the name of the style I want to apply.

...
var classText = msie? "className" : "class";
contentDiv.appendChild(catalogDiv);
table = document.createElement("table");
header = table.createTHead();
headerrow = header.insertRow(0);

nText = document.createTextNode("Part Number");
hCell = headerrow.insertCell(0).appendChild(nText);
hCell.setAttribute(classText, "headcell");

dText = document.createTextNode("Description");
hCell = headerrow.insertCell(1).appendChild(dText);
hCell.setAttribute(classText, "headcell");

uText = document.createTextNode("Unit");
hCell = headerrow.insertCell(2).appendChild(uText);
hCell.setAttribute(classText, "headcell");

pText = document.createTextNode("Price US$");
hCell = headerrow.insertCell(3).appendChild(pText);
hCell.setAttribute(classText, "headcell");

catalogDiv.appendChild(table);

...
I go on to fill the actual data cells of the table
...

The above code fails on both IE and FF. If I substitute hCell.className = "headcell" it also fails. IE with the old debugger objects to hCell.className and flags an error. The FF console is no help, there are no errors logged. I have not resorted to Firebug yet.

What am I doing wrong?

P.S. I know I should be using XPATH to do this, but I'm trying to take small steps, one at a time, with a very change-averse customer.

[colandy]

OK, being reasonably new to this I'm not 100% of this, so if anyone wants to contradict my suggestion please do.

1 - Why not just use setAttribute('class','headcell'); this will work on both IE and FF

2 - IE requires a tbody when createing a table in this way. FF doesn't although the corrcet way is to use a tbody.

3 - hcell, where is it defined as a cell, (this is probably my limited javascript knowledge so please don't take offense)

the way that I would do this is probably a little long winded but:

var mtbl=document.createElement('table');
var mbdy=document.craeteElement('tbody');
var mtr=document.createElement('tr');
var arr_text = ['Part Number','Description','Unit','Price US$'];
for(i=0;i<4;i++)
{
var mtd=document.createElement('td');
mtd.setAttribute('class','headcell');
nText = document.createTextNode(arr_text[i]);
mtd.appendChild(nText);
mtr.appendChild(mtd);
}
mbdy.appendChild(mtr);
mtbl.appendChild(mbdy);

catalogDiv.appendChild(table);

Havn't tested this, but I think it should produce the desired effect it should also work for both IE and FF. the only issue with IE and setAttribute is the setAttribute('style',.........) command.

[ncbugeye]

I'll try your approach, it looks more straightforward than mine. I stole my existing code from "JavaScript, The Complete Reference" so it comes from an impeccable source....

Thanks for the suggestion.