Javascript to hide row in table

Señor Overkill here. I agree with this guy. :wink:

That’s a first.

1)
What’s the difference between

onload = function()
{
}

and

onload = x;
function x()
{
}

Why is an anonymous function more or less “expensive”(I couldn’t tell what the answer was to the question: “Why use anonymous functions”). As far as I can tell, when you declare an anonymous function, javascript assigns a function pointer to the variable. But, doesn’t declaring a function in the standard way, and then assigning it to a variable, do the same thing? Isn’t there both a function object and a pointer to the function in memory in either case?

2)

self.toggleRow = function(row_id)
	{
		document.getElementById(row_id).toggle();
	}
}

In the code above, it looks like the window object’s member toggleRow is assigned a function pointer. It seems to me, that is a way to create a global variable from inside a function. Isn’t that the same as:

var toggleRow;
function TR_set_toggle()
{

	...
	...

	toggleRow = function(row_id)
	{
		document.getElementById(row_id).toggle();
	}
}

(dismissing for the moment that it would overwrite the previous function pointer assigned to toggleRow.)
And why use the same name as the local variable:

var toggleRow = function()
{
		this.style.display = ((this.style.display == '') ? 'none' : '');
		return false;
}

That seems confusing to me, and makes it hard to discern the connection between:

<a href="#null" onclick="toggleRow('foo1')">toggle row 1</a>

and row.toggle:

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

because it looks like the link is trying to call the local function toggleRow(), which you can’t do:

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

As far as I can tell, the link is actually calling the global var toggleRow, which has been assigned a pointer to an anonymous function. The anonymous function calls the local function toggleRow() through each element’s ‘toggle’ member. Each element’s toggle member was assigned a pointer to the local toggleRow() function in the loop.

Also, it looks like the loop not only assigns the toggleRow() function to each row(the table tr’s), but also each item in the row (the table td’s), yet the td’s aren’t being toggled on and off.

I had to create a checkbox that would display and hide certain elements in a form. Here’s a stripped down version of the process. You can take the onClick from the checkbox and add it to a link or something else if you wish.

<html>
<head>
<script type="text/javascript" language="javascript">		
	function toggle(id) {	
		if(document.getElementById(id).style.display=='block')
			{
			document.getElementById(id).style.display='none';
			document.getElementById(id).style.visibility='hidden';
			//alert('Its hidden now');
			}
		else
			{
			document.getElementById(id).style.display='block';
			document.getElementById(id).style.visibility='visible';
			//alert('Its displaying now');
			}
	}
</script>


<style type="text/css">
.toggleClass{
	display:none;
	visibility:hidden;
	}
</style>
</head>



<body>

<form name="myform" >
  <input type="checkbox" name="checkbox" value="checkbox" onClick="toggle('Table1')"> TOGGLE TABLE 1 <br>
  <br><br>


<div id="Table1" class="toggleClass">
	<table width="50%"  border="0" cellspacing="0" cellpadding="0">
	  <tr>
		<td height="600" bgcolor="#CCCCCC">SHOW ME THE CONTENT!</td>
	  </tr>
	</table>
</div>
</form>
</body>
</html>

Cheers,
Ryan Hoalt
ryan@nolimitsmm.com

well i found this thread through the search engine. I have tried the above codes but i need to know how to change the image on click. Secondly, the problem i’m facing is, the height of the row (where the actual image to clicked is given) increases.

please help me out in this.

FauxPas, I like your approach in this.

However, I am javascript retarded.

What I am doing is building a menu with expanding and collapsing table rows. The first row will be the show/hide button, while every row below will be the subnavigation.

I took your code, and instead of applying the id to only one row, I IDed a tbody grouping (rows 2-x)

This is where I come to a dead end. And it is most likely an easy fix.

I want to do this with multiple tables, with different tbody IDs (so they all don’t expand and collapse at the same time), but don’t want to have multiple instances of the same script up top. Any help appreciated.

Here’s my code:

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

<table id="about" width="160" align="center" cellspacing="0">
	<thead>
	<tr>
	<td class="toprow">
	<span onClick="toggle();">
	ABOUT
	</span>
	</td>
	</tr>
	</thead>
	<tbody id="hidethis" style="display:none">
	<tr><td class="row">
	<a href="#">WHO</a>
	</td></tr>
	<tr><td class="row">
	<a href="#">WHAT</a>
	</td></tr>
	<tr><td class="row">
	<a href="#">WHY</a>
	</td></tr>
	</tbody>
	</table>

Wow - most of this thread is undecipherable to me (ignorance bites), but I WAS able to take part of it apply it to something I’m doing - it will make my life MUCH easier. Thanks!!

I’m also interested in doing this…is there an easy way to set this up?

Here is some code to toggle a table row and change(toggle) the image btw a plus and minus too


<html>
<script>
function toggle(id)
{
	var tr = document.getElementById(id);
	if (tr==null) { return; }
	var bExpand = tr.style.display == '';
	tr.style.display = (bExpand ? 'none' : '');
	var img = document.getElementById('img'+id);
	if (img!=null)
	{
		if (!bExpand)
			img.src = 'minus.gif';
		else
			img.src = 'plus.gif';
	}
}
</script>
<body>
<table border=1 width="100%">
<TR><TD width="10"><a href="#" onclick="javascript:toggle('Row1')"><img border=0 id="imgRow1" src="minus.gif"></a></TD><TD>Click the image to the left to

toggle display of the row below</td></tr>
<tr id="Row1"><td>&nbsp;</td><td>This is a row that

toggles<br>*****************************************<br>*****************************************</td></tr></table>
</body>
</html>

I really like your script. It is very useful and easy to customize. I’ve managed to make it not show the rows until the item is clicked. Now I’m wondering how can I make it so that when I click on one of the selections it toggles all other rows off and only shows the current selection?

Ah…Spent a couple of hours and rewrote everything but had been inspired by Adios post on this. Below you’ll see what I came up with. Much simpler code to get the same functionality as a tab pane.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script>
function resetAll(){
		document.getElementById('tab1').style.display = 'none';
		document.getElementById('tab2').style.display = 'none';
		document.getElementById('tab3').style.display = 'none';
		document.getElementById('tab4').style.display = 'none';
		document.getElementById('tab5').style.display = 'none';

		document.getElementById('tablink1').className = 'tab';
		document.getElementById('tablink2').className = 'tab';
		document.getElementById('tablink3').className = 'tab';
		document.getElementById('tablink4').className = 'tab';
		document.getElementById('tablink5').className = 'tab';

}
function toggleRow2(row,link) {
resetAll();
		document.getElementById(''+row+'').style.display = 'block';
		link.className = 'tabSelected';
}
</script>
<style>
<!--
a.tab { width: 100%; display: block; background-color: #EEE; color: #000; border-bottom: #999 1px solid; text-align: center;}
a.tab:visited { width: 100%; display: block; background-color: #EEE; color: #000; border-bottom: #999 1px solid; text-align: center;}
a.tab:hover { width: 100%; display: block; background-color: #999; color: #000; border-bottom: #999 1px solid; text-align: center;}

a.tabSelected { width: 100%; display: block; background-color: #FFF; color: #000; border-bottom: #FFF 1px solid; text-align: center;}
a.tabSelected:visited { width: 100%; display: block; background-color: #FFF; color: #000; border-bottom: #FFF 1px solid; text-align: center;}
a.tabSelected:hover { width: 100%; display: block; background-color: #FFF; color: #000; border-bottom: #FFF 1px solid; text-align: center;}

table#tabs td { padding: 0px; text-align: left;}
table#tabs td#tabs { border-left: #999 1px solid; border-right: #999 1px solid; border-top: #999 1px solid;}
table#tabs td.rows { background-color: #FFF; border-left: #999 1px solid; border-right: #999 1px solid; border-bottom: #999 1px solid;}
-->
</style>

</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="tabs">
  <tr>
    <td align="center" style=" border-left: #999 1px solid; border-right: #999 1px solid; border-top: #999 1px solid;"><a href="#null" onclick="toggleRow2('tab1',this)" class="tabSelected" id="tablink1">Test1</a></td>
    <td align="center" style=" border-left: #999 1px solid; border-right: #999 1px solid; border-top: #999 1px solid;"><a href="#null" onclick="toggleRow2('tab2',this)" class="tab" id="tablink2">Test2</a></td>
    <td align="center" style=" border-left: #999 1px solid; border-right: #999 1px solid; border-top: #999 1px solid;"><a href="#null" onclick="toggleRow2('tab3',this)" class="tab" id="tablink3">Test3</a></td>
    <td align="center" style=" border-left: #999 1px solid; border-right: #999 1px solid; border-top: #999 1px solid;"><a href="#null" onclick="toggleRow2('tab4',this)" class="tab" id="tablink4">Test4</a></td>
    <td align="center" style=" border-left: #999 1px solid; border-right: #999 1px solid; border-top: #999 1px solid;"><a href="#null" onclick="toggleRow2('tab5',this)" class="tab" id="tablink5">Test5</a></td>
  </tr>
  <tr id="tab1">
    <td colspan="5" class="rows">Row 1</td>
  </tr>
  <tr id="tab2" style="display: none;" >
    <td colspan="5" class="rows">Row 2</td>
  </tr>
  <tr id="tab3" style="display: none;">
    <td colspan="5" class="rows">Row 3</td>
  </tr>
  <tr id="tab4" style="display: none;">
    <td colspan="5" class="rows">Row 4</td>
  </tr>
  <tr id="tab5" style="display: none;">
    <td colspan="5" class="rows">Row 5</td>
  </tr>
</table>
</body>
</html>

All,

Also experiencing problems. Code attached. Got about 4 different version of the JavaScript and none work inside the PHP.

Thinking I need a hidden field in the php to make it work.

What do you think?

Thanks!

OMR

All,

I got this fixed. Found that syntax in my code was major problem. Code is (javascript):

    <script language="javascript">
    function getItem(id) {
        var itm = false;
        if(document.getElementById)
            itm = document.getElementById(id);
        else if(document.all)
            itm = document.all[id];
        else if(document.layers)
            itm = document.layers[id];
        return itm;
    }

    function toggleItem(id) {
        itm = getItem(id);
        if(!itm)
            return false;
        if(itm.style.display == 'none')
            itm.style.display = '';
        else
            itm.style.display = 'none';
        return false;
    }
    </script>

(PHP)

<a href='#' onclick=\\"toggleItem('myTbody[$i]')\\">

Notice the placement of the single and double quotes and the “\” escape character needed for correct processing.

I noticed all the extra javascript code in here to get MSIE to read a page. I have a problem in thread:

Where I cannot get it to work. Can any of the contributors here, help me with this?

Thanks All!

OMR

thank you so much that was so helpful and easy!

you rock!