PDA

View Full Version : Set attribute problem

carabusu
03-14-2009, 10:45 AM
Hello, I'm trying with a script to set the style attribute to display:none for tr's which have name 'Steps'. How can I do that?
I tried the following script:

function displaynone() {
var x=document.getElementsByName("Steps")
alert(x.length + " elements!")
for(var i = 0; i < x.length; i++)
{
x[i].setAttribute("style","display:none");
alert(x[i].getAttribute("style"));

}


}

The function is calling after I pressed a button and the alert shows me the message: 'display:none' but after I check the html code no attribute is changed, I still have style="" no style="display:none". What I'm doing wrong?

Thanks.
coothead
03-14-2009, 11:53 AM
Hi there carabusu,

and a warm welcome to these forums. :agree:

Your code does work in Firefox, Opera and Safari but, alas, not in IE.

I would suggest that you try it like this instead...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title></title>

<style type="text/css">
#remove {
cursor:pointer;
margin-bottom:10px;
}
.hide {
display:none;
}
</style>

<script type="text/javascript">
if(window.addEventListener){
window.addEventListener('load',init,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',init);
}
}

function init(){
document.getElementById('remove').onclick=function() {
displaynone();
}
}
function displaynone() {

var x=document.getElementsByTagName('tr');
alert(x.length+ ' tr elements!');

for(var i= 0;i<x.length;i++){
if(x[i].className=='steps')
x[i].className='steps hide';
}
}
</script>

</head>
<body>

<div id="remove">click to remove trs</div>

<table border="1"><tr>
<td>cell 1</td><td>cell 2</td><td>cell 3</td>
</tr><tr class="steps">
<td>cell 4</td><td>cell 5</td><td>cell 6</td>
</tr><tr>
<td>cell 7</td><td>cell 8</td><td>cell 9</td>
</tr><tr class="steps">
<td>cell 10</td><td>cell 11</td><td>cell 12</td>
</tr>
</table>

</body>
</html>
RysChwith
03-16-2009, 08:16 AM
Another solution is to use the style object:x[ i ].style.display = "none";Either should work nicely, though.

Rys