Show / Hide table rows via checkboxes

[agr8lemon]

Hello everyone,

I hoping you can help me. I've got a table that I want to be able to show/hide rows based on what check box is checked. By default, I don't want anything displayed, then if you check a or some of the check boxes you'll see the data.

Here is what I have, which has some effect in FF but does not work at all in IE.

This is my script (which is part mine, part web-found)

<style type="text/css">
 
.this {
        display: none;
}
.this2 {
        display: none;
}
</style>
<script>
function showRow(obj,klassName){
	var elems = document.getElementsByName(klassName);
	var newDisplay = "none";
	if(obj.checked == true){
	     newDisplay = "block";
	}
	for(var idx=0; idx < elems.length ; idx++){
		elems[idx].style.display = newDisplay;
	}
}
</script>

And this is the HTML that I have

The boxes:

Filter Options </br>
<input type='checkbox' id="1" value="yes" onclick="showRow(this,'x')"/>This 1
              <input type="checkbox" id="2" onclick="showRow(this,'y')"/>This 2

The rows via PHP (this part does work, it adds the TR classes to the proper rows):

If ($row['Facility'] == "SHEC") {
$trid = "<tr class='this1' name='x'>";
}else{
$trid = "<tr class='this2' name='y'>";
}

If anyone could provide some insight, I would greatly appreciate it.

Thank you!

[parry_kulk]

Try

newDisplay = "";

instead of

newDisplay = "block";

What it will do is that it will try to remove any style applied and try to set it to the elements inherent values and as a result should work in both FF and IE.

Hope this helps

[agr8lemon]

Thanks for the help!

That works great in FF, but IE still does nothing when you check or uncheck the boxes. Any other suggestions?

[parry_kulk]

Along with the display property also try the visibility property,

........
var newDisplay = "none";
var newVisibility = "hidden";
if(obj.checked == true){
     newDisplay = "";
     newVisibility = "visible";
}
for(var idx=0; idx < elems.length ; idx++){
	elems[idx].style.display = newDisplay;
	elems[idx].style.visibility = newVisibility;
}
.........

Also add the visibility property in the css

......
.this {
     display: none;
     visibility: hidden;
}
.this2 {
     display: none;
     visibility: hidden;
}
............