problem setting table attributes with js

[Grimblam]

Hi,

I'm trying to mess about with a table using javascript. I'm deleting the current row then adding a new row and adding a couple of columns. I then want to add either a style attribute and add a border to the bottom of one of the cells or add a class attribute and set it up in the stylesheet. Problem is, when I try to use the setAttribute it doesn't do anything.

Can anyone spot the problem?? Codes below..

Cheers,
Andy

//javascript
<SCRIPT LANGUAGE='JavaScript1.2'>
function setMenuComment(arg)
{
	//remove row
	var tbl = document.getElementById('menuCommentTable');
	var lastRow = tbl.rows.length;
	if (lastRow > 0) tbl.deleteRow(lastRow - 1);
	
	//add row
	var lastRow = tbl.rows.length;
	var iteration = lastRow + 1;
	var row = tbl.insertRow(lastRow);
	row.setAttribute('align', 'left');	

	// left cell
	var cellLeft = row.insertCell(0);
	blank = document.createTextNode('blank');
	cellLeft.appendChild(blank);
	
	// right cell
	var cellRight = row.insertCell(1);
		
	var pEl = document.createElement('p');
	if(arg=='main'){ text = document.createTextNode('introduction area'); cellRight.setAttribute('width','750');}
	else if(arg=='cv'){ text = document.createTextNode('personal profile and information'); cellRight.setAttribute('width','600');}
	else if(arg=='downloads'){ text = document.createTextNode('software and documents to download'); cellRight.setAttribute('width','450');}
	else if(arg=='links'){ text = document.createTextNode('links to other sites of interest'); cellRight.setAttribute('width','300');}
	pEl.appendChild(text);
	cellRight.appendChild(pEl);
	cellRight.setAttribute("class", "menuInfo") ;	
}
</SCRIPT>

//html
<!-- Menu Info Area -->
				<tr><td border="0">
					<table  border="0" align="center" cellpadding="0" cellspacing="0" vspace="0" id="menuCommentTable">

					<tr>
					
					<td class="menuBar" width="100%" style="border-bottom:1px solid #DCDCDC"><a>&nbsp;</a></td>
					</tr>
					</table>


				</td></tr>

//stylesheet

td.menuInfo 
{
	border-left:1px solid #DCDCDC; 
	border-bottom:1px solid #EFEFEF; 
	height: 20; 
	text-align: left;
	vertical-align: middle; 
	line-height: 1;				
}

 

[vongrunt]

Try with attribute "className" instead of "class".

 

[Grimblam]

Genius..That worked!