Problem setting attriibutes in JS

[AndyG]

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. In
fact when I try and set any attribute of cellLeft or cellRight such as
bgcolor=red; it does nothing. It sets the width ok though!

Can anyone spot the problem?? Codes below..

Cheers,
Andy


<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;
}

 

[Martin Honnen]

AndyG wrote:

cellRight.setAttribute("class", "menuInfo") ;

Use
cellRight.className = "menuInfo";
setAttribute in IE is misbehaving so you are better off scripting
properties and that way the script is working in other browsers too.

 

[Michael Winter]

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.

Don't use setAttribute in HTML documents. As far as I know, all standard
attributes have shortcut properties available. So, setting the class
changes from:

element.setAttribute('class', '...');

to

element.className = '...';


From:

element.setAttribute('width', '8em');

to

element.width = '8em';


That may, or may not, solve your problem.

In fact when I try and set any attribute of cellLeft or cellRight such as
bgcolor=red; it does nothing. It sets the width ok though!

All of those attributes are deprecated. I don't think cellLeft/Right even
exist. If they do, they're proprietary.

Use CSS. No align attributes. No bgcolor. Just up-to-date, structural
mark-up.

[snip]

<SCRIPT LANGUAGE='JavaScript1.2'>

Dear Lord! Don't EVER use JavaScript1.2 as the language specification
unless you know what you're doing. The language rules changed in that
version and Netscape-like browsers respect those changes.

Stick to the type attribute. It's required anyway, and makes the language
attribute redundant.

function setMenuComment(arg)
{
//remove row
var tbl = document.getElementById('menuCommentTable');
var lastRow = tbl.rows.length;
if (lastRow > 0) tbl.deleteRow(lastRow - 1);

[snip]

If this code is for the Web, read up on feature detection. Not all
browsers in use support DOM methods and properties.

<URL:http://jibbering.com/faq/#FAQ4_26>

Mike

 

[AndyG]

Thanks, that worked

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.

Don't use setAttribute in HTML documents. As far as I know, all standard
attributes have shortcut properties available. So, setting the class
changes from:

element.setAttribute('class', '...');

to

element.className = '...';


From:

element.setAttribute('width', '8em');

to

element.width = '8em';


That may, or may not, solve your problem.

In fact when I try and set any attribute of cellLeft or cellRight such as
bgcolor=red; it does nothing. It sets the width ok though!

All of those attributes are deprecated. I don't think cellLeft/Right even
exist. If they do, they're proprietary.

Use CSS. No align attributes. No bgcolor. Just up-to-date, structural
mark-up.

[snip]

<SCRIPT LANGUAGE='JavaScript1.2'>

Dear Lord! Don't EVER use JavaScript1.2 as the language specification
unless you know what you're doing. The language rules changed in that
version and Netscape-like browsers respect those changes.

Stick to the type attribute. It's required anyway, and makes the language
attribute redundant.

function setMenuComment(arg)
{
//remove row
var tbl = document.getElementById('menuCommentTable');
var lastRow = tbl.rows.length;
if (lastRow > 0) tbl.deleteRow(lastRow - 1);

[snip]

If this code is for the Web, read up on feature detection. Not all
browsers in use support DOM methods and properties.

<URL:http://jibbering.com/faq/#FAQ4_26>

Mike