Is it possible to have a show/hide click on link that would hide or show a row in one of my tables? Something that would hide the whole <tr> tags not just blank out a patch on my web page so a white square would show up.
Try this…
<html>
<head>
<script>
function toggle() {
if( document.getElementById("hidethis").style.display=='none' ){
document.getElementById("hidethis").style.display = '';
}else{
document.getElementById("hidethis").style.display = 'none';
}
}
</script>
</head>
<body>
<span onClick="toggle();">toggle</span><br /><br />
<table border="1">
<tr>
<td>Always visible</td>
</tr>
<tr id="hidethis">
<td>Hide this</td>
</tr>
<tr>
<td>Always visible</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>untitled</title>
<style type="text/css">
#foo {
position: absolute;
z-index: 99;
left: 120px;
top: 60px;
}
tr {
background: skyblue;
}
td {
font-size: smaller;
padding: 2px;
border: 3px #000 double;
}
a:link, a:visited, a:hover, a:active {
position: absolute;
left: 10px;
top: 70px;
font: normal 11px verdana;
color: darkred;
text-decoration: none;
}
a:hover {
padding-left: 3px;
}
</style>
<script type="text/javascript">
/* call onload with table id(s) */
function TR_set_toggle()
{
/* toggleRow method */
var toggleRow = function()
{
this.style.display = ((this.style.display == '') ? 'none' : '');
return false;
}
for (var oTable, a = 0; a < arguments.length; ++a)
{
oTable = document.getElementById(arguments[a]);
var r = 0, row, rows = oTable.rows;
while (row = rows.item(r++))
row.toggle = toggleRow;
}
/* convenience function */
self.toggleRow = function(row_id)
{
document.getElementById(row_id).toggle();
}
}
onload = function()
{
TR_set_toggle('foo');
}
</script>
</head>
<body>
<table id="foo">
<tbody>
<tr id="foo1">
<td>row 1 row 1 row 1 row 1 row 1</td>
<td>row 1 row 1 row 1 row 1 row 1</td>
<td>row 1 row 1 row 1 row 1 row 1</td>
<td>row 1 row 1 row 1 row 1 row 1</td>
</tr>
<tr id="foo2">
<td>row 2 row 2 row 2 row 2 row 2</td>
<td>row 2 row 2 row 2 row 2 row 2</td>
<td>row 2 row 2 row 2 row 2 row 2</td>
<td>row 2 row 2 row 2 row 2 row 2</td>
</tr>
<tr id="foo3">
<td>row 3 row 3 row 3 row 3 row 3</td>
<td>row 3 row 3 row 3 row 3 row 3</td>
<td>row 3 row 3 row 3 row 3 row 3</td>
<td>row 3 row 3 row 3 row 3 row 3</td>
</tr>
</tbody>
</table>
<a href="#null" onclick="toggleRow('foo1')">toggle row 1</a>
<a href="#null" style="top:95px;" onclick="toggleRow('foo2')">toggle row 2</a>
<a href="#null" style="top:120px;" onclick="toggleRow('foo3')">toggle row 3</a>
</body>
</html>
Need to absolutely position the table if you don’t want other content ‘shoved’ around. 
OK, adios, I’m not quite grasping what you’ve got going on here. I understand the visible, invisible part. But here’s what I’m not getting:
-
Why are you calling that function on the page load?
-
It apparently only has one argument yet you’ve got “arguments.length”? And to top it off you’re iterating backwards?
-
Why the anonymous functions?
Maybe with a little explanation I’ll have a better grasp of how that works.
Not as cool as adios’s, but here’s another one
/* tableRowDisplay()
bShow - if true show the row, else hide it
secId - ID of table or tBody
rowNum - zero-based row number
*/
function tableRowDisplay(bShow, secId, rowNum)
{
var tbl = document.getElementById(secId);
if (tbl && rowNum < tbl.rows.length) {
tbl.rows[rowNum].style.display = bShow ? '' : 'none';
}
}
Hi stymiee,
I don’t think adios will mind if I take a shot at those questions 
>> Why are you calling that function on the page load?
It loops through all rows in the table and adds a toggle() function (method) to each row object. Later, you only have to call a row’s toggle() method and it toggles itself.
>> It apparently only has one argument yet you’ve got “arguments.length”?
You can pass any number of table IDs to it, and it will add a toggle() method to all of their rows.
>> And to top it off you’re iterating backwards?
It iterates from rows[0] to rows[rows.length-1], and then rows.item() will return null;
>> Why the anonymous functions?
Perhaps he should not have used an anonymous function there. (just my opinion ;))
OT…
I couldn’t help myself I played with this some more and ended up three new X functions. Here’s a demo.
Mike:
Perhaps he should not have used an anonymous function there.
How come?
Edit:
Never mind…pointer == ‘less expensive’ 
So it’s actually adding a method to each row object? Now that makes sense.
So in this example that part of the code wasn’t really necessary but if there were other tables it would be?
Oops, I read that wrong.
Thanks for the explanation. It makes a whole more sense now.
Yep, you’re both right.
Nice work, adios
Thanks Mike.
Just a heads-up on cellIndex…afaik it’s (still) broken in Safari as noted here. Might want to patch it in with a sniffer/iterator.
Safari sniff:
Thanks for the tips and links, adios. I’ll make me a note about that in the source.
thanks guys, I’ll give it a try!
How could I change this code to NOT display the row until the toggle link is clicked? I tried putting the onload command in the body tag but it’s delayed about 2 seconds.
You could add this style to the tr tag:
<tr id=“hidethis” style=“display:none;”>
Easy enough. Thanks!
Thanks a lot for the solution .
I implemented the solution, but the problem is that the toggle only applies to the first row and not to any other rows.
what iam doing is this:
i have 5 rows in the table i right click on any row,a menu comes up with Hide/Unhide options choose hide the selected row should be hidden , instead the first row is getting hidden.
Reply in this regard will be appreciated.
Thanks in Advance,
Smitha
pasting the code(html)
<html>
<head>
<style>
.skin0 {
position:absolute;
text-align:left;
width:200px;
border:2px solid black;
background-color:menu;
font-family:Verdana;
line-height:20px;
cursor:default;
visibility:hidden;
}
.skin1 {
cursor:default;
font:menutext;
position:absolute;
text-align:left;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
width:120px;
background-color:menu;
border:1 solid buttonface;
visibility:hidden;
border:2 outset buttonhighlight;
}
.menuitems {
padding-left:15px;
padding-right:10px;
}
</style>
<script>
var menuskin = “skin1”; // skin0, or skin1
var display_url = 0; // Show URLs in status bar?
function showmenuie5() {
var rightedge = document.body.clientWidth-event.clientX;
var bottomedge = document.body.clientHeight-event.clientY;
if (rightedge < ie5menu.offsetWidth)
ie5menu.style.left = document.body.scrollLeft + event.clientX - ie5menu.offsetWidth;
else
ie5menu.style.left = document.body.scrollLeft + event.clientX;
if (bottomedge < ie5menu.offsetHeight)
ie5menu.style.top = document.body.scrollTop + event.clientY - ie5menu.offsetHeight;
else
ie5menu.style.top = document.body.scrollTop + event.clientY;
ie5menu.style.visibility = “visible”;
return false;
}
function hidemenuie5() {
ie5menu.style.visibility = “hidden”;
}
function highlightie5() {
if (event.srcElement.className == “menuitems”) {
event.srcElement.style.backgroundColor = “highlight”;
event.srcElement.style.color = “white”;
if (display_url)
window.status = event.srcElement.url;
}
}
function lowlightie5() {
if (event.srcElement.className == “menuitems”) {
event.srcElement.style.backgroundColor = “”;
event.srcElement.style.color = “black”;
window.status = “”;
}
}
function jumptoie5() {
if (event.srcElement.className == “menuitems”) {
if (event.srcElement.getAttribute(“target”) != null)
window.open(event.srcElement.url, event.srcElement.getAttribute(“target”));
else
window.location = event.srcElement.url;
}
}
///function clickIE()
//{
//if(IE4plus)
//{
//alert(“iam here”);
//if(event.button == 2 || event.button == 3)
//{
//alert(“right click”);
//}
//return;
//}
//}
function toggle() {
//alert(“iam in toggle”);
alert(document.getElementById(“hidethis”).style.display);
if( document.getElementById(“hidethis”).style.display==‘none’ ){
document.getElementById(“hidethis”).style.display = ‘’;
//alert(“iam out of here”);
}else{
document.getElementById(“hidethis”).style.display = ‘none’;
//alert(“iam out of here1”);
}
}
</script>
</head>
<body>
<table>
<tr id=“hidethis”>
<td><input type = “text” name =“text1” value = “ADMIN” /></td>
</tr>
<tr id=“hidethis”>
<td><input type = “text” name =“text” value = “TRADEWEAVE” /></td>
</tr>
<tr id=“hidethis”>
<td><input type = “text” name =“text1” value = “MPS” /></td>
</tr>
<tr id=“hidethis”>
<td><input type = “text” name =“text1” value = “POLO” /></td>
</tr>
<tr id=“hidethis”>
<td><input type = “text” name =“text1” value = “JBOYD” /></td>
</tr>
</table>
<div id=“ie5menu” class=“skin0” onMouseover=“highlightie5()” onMouseout=“lowlightie5()” onClick=‘toggle()’>
<div class=“menuitems”>Hide</div>
<div class=“menuitems”>UnHide</div>
</div>
<script language=“JavaScript1.2”>
if (document.all && window.print) {
ie5menu.className = menuskin;
document.oncontextmenu = showmenuie5;
document.body.onclick = hidemenuie5;
}
</script>
</body>
</html>
SmithaGanesh, did you ever solve your problem? I’m trying to do the same thing and I also have the problem that only the first row toggles…
If you are just working with a few rows (or elements), adios’ approach may lean a bit toward overkill. Here’s a simpler and more general approach, though it requires more hard coding.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
td{border:3px solid red;}
</style>
<script type="text/javascript">
function hideShow(el_id){
var el=document.getElementById(el_id);
if(el_id.style.display!="none"){
el_id.style.display="none";
}else{
el_id.style.display="";
}
}
</script>
</head>
<body>
<table>
<tr id="row1">
<td> </td>
</tr>
<tr id="row2">
<td> </td>
</tr>
<tr id="row3">
<td> </td>
</tr>
</table>
<a href="#" onclick="hideShow(row1);">Hide/Show Row 1</a><br />
<a href="#" onclick="hideShow(row2);">Hide/Show Row 2</a><br />
<a href="#" onclick="hideShow(row3);">Hide/Show Row 3</a><br />
</body>
</html>
Hi. I have a question about the “display = ‘none’” and “display = ‘’” being used in this example. When playing with the display, I’ve always seen it as “display = ‘block’” to make something visible. Why do you use “display = ‘’”?
Thanks.
The display=“” returns the element to its default display value. There are many values for the display attribute, such as block, inline, list-item, table-row, etc. The passing of the empty string is simply a shortcut.