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!

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

Thanks for the help!

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

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;
}
............
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.