Showing / Hiding table rows

[prl]

Hello,

I have a table on my website that lists lots of items. When I click on an item I want to show a row just below the item with all the details.. Everything works on firefox, but in Internet Explorer it just doesn't work. I have this:

.hiddenImage {display:none;}
.visibleImage {display:table-row;}

<a name="<?php echo "item" . $itemId; ?>" href="javascript:showItem('<?php echo "item" . $itemId; ?>');" (...)>

the shoItem function is as follows:

var lastItem = null;
 
function showItem(id) {
	x = "item" + '<?echo $selectedItem;?>';
 
	// coming from the menu, not after clicking thumbnail
	if (x == "item") {
		if (lastItem == id) {
			if (document.getElementById(id).className == "hiddenImage") {
				document.getElementById(id).className = "visibleImage";
			}
			else {
				document.getElementById(id).className = "hiddenImage";
			}
		}
		else {
			if (lastItem != null) {
				document.getElementById(lastItem).className = "hiddenImage";
			}
			document.getElementById(id).className = "visibleImage";
		}
	}
 
	// coming from clicking a thumbnail
	else {
		if (x == id) {
			if (document.getElementById(id).className == "hiddenImage") {
				document.getElementById(id).className = "visibleImage";
				document.getElementById(lastItem).className = "hiddenImage";
			}
			else {
				document.getElementById(id).className = "hiddenImage";
			}
		}
		else {
			if (lastItem == id) {
				if (document.getElementById(id).className == "hiddenImage") {
					document.getElementById(id).className = "visibleImage";
				}
				else {
					document.getElementById(id).className = "hiddenImage";
				}
			}
			else {
				if (lastItem != null) {
					document.getElementById(lastItem).className = "hiddenImage";
				}
				document.getElementById(x).className = "hiddenImage";
				document.getElementById(id).className = "visibleImage";
			}
		}
	}
 
	lastItem = id;
}

Can anyone help me? Why isn't this working on Internet Explorer?

Thanks in advance,
Paulo

[darkwater23]

IE doesn't support table-row. The site below suggests setting the display to nothing (empty string) and letting the browsers figure it out. That seems to work in both browsers.

http://jszen.blogspot.com/2004/07/ta...srevealed.html

[prl]

IE doesn't support table-row. The site below suggests setting the display to nothing (empty string) and letting the browsers figure it out. That seems to work in both browsers.

http://jszen.blogspot.com/2004/07/ta...srevealed.html

I changed my code to:

function showItem(id) {
	x = "item" + '<?echo $selectedItem;?>';
 
	// coming from the menu, not after clicking thumbnail
	if (x == "item") {
		if (lastItem == id) {
			if (document.getElementById(id).className == "hiddenImage") {
				//document.getElementById(id).className = "visibleImage";
				document.getElementById(id).style.display = '';
			}
			else {
				document.getElementById(id).className = "hiddenImage";
			}
		}
		else {
			if (lastItem != null) {
				document.getElementById(lastItem).className = "hiddenImage";
			}
			//document.getElementById(id).className = "visibleImage";
			document.getElementById(id).style.display = '';
		}
	}
 
	// coming from clicking a thumbnail
	else {
		if (x == id) {
			if (document.getElementById(id).className == "hiddenImage") {
				//document.getElementById(id).className = "visibleImage";
				document.getElementById(id).style.display = '';
				document.getElementById(lastItem).className = "hiddenImage";
			}
			else {
				document.getElementById(id).className = "hiddenImage";
			}
		}
		else {
			if (lastItem == id) {
				if (document.getElementById(id).className == "hiddenImage") {
					//document.getElementById(id).className = "visibleImage";
					document.getElementById(id).style.display = '';
				}
				else {
					document.getElementById(id).className = "hiddenImage";
				}
			}
			else {
				if (lastItem != null) {
					document.getElementById(lastItem).className = "hiddenImage";
				}
				document.getElementById(x).className = "hiddenImage";
				//document.getElementById(id).className = "visibleImage";
				document.getElementById(id).style.display = '';
			}
		}
	}
 
	lastItem = id;
}

but unfortunately it's still not working..

[technetic]

I use Script.aculo.us which gives you a great little fade effect too. It's so simple to implement and you can use it on divs or table rows, just assign the element an ID.

[prl]

I use Script.aculo.us which gives you a great little fade effect too. It's so simple to implement and you can use it on divs or table rows, just assign the element an ID.

Unfortunately, I have no time to check that out, but will as soon as I can.. Right now, I just need to get this working on Internet Explorer.. the funny thing is that this code works:

var lastCat = null;
var openCat = null;
 
function showImage(id) {
 
	if (lastCat == id) {
		if (document.getElementById(id).className == "hiddenImage") {
			document.getElementById(id).className = "visibleImage";
		}
		else {
			document.getElementById(id).className = "hiddenImage";
		}
	}
	else {
		if (lastCat != null) {
			document.getElementById(lastCat).className = "hiddenImage";
		}
		document.getElementById(id).className = "visibleImage";
	}
	lastCat = id;
	openCat = "";
}

but this does not:

function showItem(id) {
	x = "item" + '<?echo $selectedItem;?>';
 
	// coming from the menu, not after clicking thumbnail
	if (x == "item") {
		if (lastItem == id) {
			if (document.getElementById(id).className == "hiddenImage") {
				document.getElementById(id).className = "visibleImage";
			}
			else {
				document.getElementById(id).className = "hiddenImage";
			}
		}
		else {
			if (lastItem != null) {
				document.getElementById(lastItem).className = "hiddenImage";
			}
			document.getElementById(id).className = "visibleImage";
		}
	}
 
	// coming from clicking a thumbnail
	else {
		if (x == id) {
			if (document.getElementById(id).className == "hiddenImage") {
				document.getElementById(id).className = "visibleImage";
				document.getElementById(lastItem).className = "hiddenImage";
			}
			else {
				document.getElementById(id).className = "hiddenImage";
			}
		}
		else {
			if (lastItem == id) {
				if (document.getElementById(id).className == "hiddenImage") {
					document.getElementById(id).className = "visibleImage";
				}
				else {
					document.getElementById(id).className = "hiddenImage";
				}
			}
			else {
				if (lastItem != null) {
					document.getElementById(lastItem).className = "hiddenImage";
				}
				document.getElementById(x).className = "hiddenImage";
				document.getElementById(id).className = "visibleImage";
			}
		}
	}
 
	lastItem = id;
}

the code is the same, and those are the same css classes.. why is one working on IE and the one not?

thanks in advance,
Paulo

[prl]

anyone?