Ad:

JavaScript / DHTML / AJAX Discussion Thread
Unsolved
Views: 1405

Sep 2nd, 2010

Show / Hide table rows via checkboxes

Expand Post »

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)

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<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>
<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:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
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
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):

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
If ($row['Facility'] == "SHEC") {
$trid = "<tr class='this1' name='x'>";
}else{
$trid = "<tr class='this2' name='y'>";
}
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!

Similar Threads

Show hide a <tr> with Javascript base on a drop down selection. in JavaScript / DHTML / AJAX
Javascript Show/hide form doesnt work.... in JavaScript / DHTML / AJAX
Help: Show - Hide in JavaScript / DHTML / AJAX
Populate text field from drop down list in JavaScript / DHTML / AJAX
Hide Table rows in FormView InsertTemplate in ASP.NET

agr8lemon

Reputation Points: 10

Solved Threads: 0

Light Poster

Offline

30 posts
since Aug 2009

Permalink

Sep 3rd, 2010

Re: Show / Hide table rows via checkboxes

Try

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)

newDisplay = "";

instead of

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)

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

parry_kulk

Sponsor

Reputation Points: 26

Solved Threads: 41

Junior Poster

Offline

166 posts
since Jan 2007

Permalink

Sep 3rd, 2010

Re: Show / Hide table rows via checkboxes

Thanks for the help!

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

agr8lemon

Reputation Points: 10

Solved Threads: 0

Light Poster

Offline

30 posts
since Aug 2009

Permalink

Sep 3rd, 2010

Re: Show / Hide table rows via checkboxes

Along with the display property also try the visibility property,

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
........
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;
}
.........
........
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

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
......
.this {
     display: none;
     visibility: hidden;
}
.this2 {
     display: none;
     visibility: hidden;
}
............
......
.this {
     display: none;
     visibility: hidden;
}
.this2 {
     display: none;
     visibility: hidden;
}
............

Last edited by parry_kulk; Sep 3rd, 2010 at 9:18 am.

parry_kulk

Sponsor

Reputation Points: 26

Solved Threads: 41

Junior Poster

Offline

166 posts
since Jan 2007

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Printscreen Help

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Replace Content from AJAX Result (SACK)

DaniWeb Message

Cancel Changes

User Name
Password