Link to home
Start Free TrialLog in
Avatar of saturation
saturation

asked on

Hide table row based on innerHTML

I have a table row with the following:

<tr><td>&nbsp;</td><td>Type</td</tr>

Using code between the <head> tags, I need to hide this row based on the word "Type".   I have no idea where to start.   Help?
Avatar of MMDeveloper
MMDeveloper
Flag of United States of America image

so you want to hide all rows that have a cell containing a keyword in it?
ASKER CERTIFIED SOLUTION
Avatar of MMDeveloper
MMDeveloper
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of hielo
Refer to the example below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
<head>
<title></title>
<script type="text/javascript">
//call init once the page loads
window.onload=init;
function init()
{
	//obtain a list of all the <td> elements
	var td = document.getElementsByTagName("td");
	
	//iterate through list of elements
	for( var i=0; i < td.length; ++i)
	{
		//check if the value of the <td> == "Type"
		if( td[i].innerHTML=="Type" )
		{
			//if the above condition is true, then hide the
			//parentNode of the current td[i] - namely the <tr>
			td[i].parentNode.style.display='none';
		}
	}
}
</script>
</head>
<body>
<table summary="">
	<tr><td>&nbsp;</td><td>a</td></tr>
	<tr><td>&nbsp;</td><td>Type</td></tr>
	<tr><td>&nbsp;</td><td>b</td></tr>
	<tr><td>&nbsp;</td><td>c</td></tr>
	<tr><td>&nbsp;</td><td>Type</td></tr>
	<tr><td>&nbsp;</td><td>d</td></tr>
</table>
</body>
</html>

Open in new window