...

View Full Version : hidden <tr> on JS



furma
12-07-2005, 12:41 AM
Hello.

I have a table which looks like:

<table>
<tr><td>one</td></tr>
<tr><td>one display</td></tr>
<tr><td>one display</td></tr>
</table>

The "one display" are set to be "display: none";
It's being set automatically using a "for" loop in PHP.
I want it to become "display: inline"; when a user clicks on the "one" td.
Both "one display"'s should have the same name (or ID, if possible), so I can make them both appear when I click on the "one";

How do I do that?

Bill Posters
12-07-2005, 08:32 AM
id attributes must be unique on a page, i.e they can only be used once on each page. The appropriate attribute to use would be class.

e.g.

js:

function toggleRows() {

var rows = document.getElementsByTagName('tr');
for (i=0; i<rows.length; i++) {
if (rows[i].className && rows[i].className=='optional') {
rows[i].style.display = 'inline';
}
}

}

markup:

<table>
<tr>
<td><a href="#" onclick="toggleRows(); return false;">one</a></td>
</tr>
<tr class="optional">
<td>one display</td>
</tr>
<tr class="optional">
<td>one display</td>
</tr>
</table>

Kor
12-07-2005, 09:37 AM
You may use a full dynamic method without any special markup of id or class



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<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">
<script type="text/javascript">
function toggleRows(obj){
var row = obj.parentNode;
while(row.nodeName.toLowerCase()!='tr'){
row=row.parentNode;
}
var next = row.nextSibling;
while(next){
if(next.nodeName.toLowerCase()=='tr'){
next.style.display=(next.style.display=='none'||next.style.display=='')?'block':'none';
}
next=next.nextSibling;
}
}
</script>

</head>
<body>
<table>
<tr>
<td><a href="#" onclick="toggleRows(this);return false">one</a></td>
</tr>
<tr style="display:none">
<td>one display</td>
</tr>
<tr style="display:none">
<td>one display</td>
</tr>
</table>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum