[thelist] Hiding/showing table rows in Mozilla

[Scott Brady]

I have a table where I want to hide/show certain rows using DHTML.  The code I have (a sample is below) works in IE5.5 the way I want it to.  However, in Mozilla, clicking on the "expand" icon (the plus sign) isn't working right. When you click on the plus, the row you want to display gets displayed after the other rows currently displayed and gets squished into one of the table cells. And, when hiding the rows, the space that was added to make room for the formerly hidden rows doesn't go away.

I'm on Win2K using Mozilla 1.2.1.

Here's a shortened version of the code (I've removed portions of the page that aren't relevant [including some JS functions]):

------------------------
BEGIN CODE
------------------------
<script type="text/javascript">
	var plusOff = new Image, plusOn = new Image, minusOff = new Image, minusOn = new Image;

	function preloadImages()
	{
		plusOff.src = 'images/plus.gif';
		plusOn.src = 'images/plus_over.gif';
		minusOff.src = 'images/minus.gif';
		minusOn.src = 'images/minus_over.gif';
	}

	function swapImage(imgObj, state)
	{
		var fileArray;
		var newName = '';

		// Need to determine new src
		if (state == 'over')
		{
			fileArray = imgObj.src.split('.gif');
			newName = fileArray[0] + '_over.gif';
		}
		else
		{
			fileArray = imgObj.src.split('_over');
			newName = fileArray[fileArray.length - 2] + '.gif';
		}

		imgObj.src = newName;
	}

	function showHide(imgObj,theID)
	{
		var showYN, showString = '';
		var layerID = 'cat' + theID;
		var theLayer;

		if (imgObj.src.indexOf('plus') != -1)
		{
			showYN = true;
			showString = 'inline';
		}
		else
		{
			showYN = false;
			showString = 'none';
		}

		// Change plus/minus image first
		if (showYN)
		{
			imgObj.src = minusOn.src;
			imgObj.setAttribute('alt','-');
			imgObj.setAttribute('title','Contract Category');
		}
		else
		{
			imgObj.src = plusOn.src;
			imgObj.setAttribute('alt','+');
			imgObj.setAttribute('title','Expand Category');
		}

		// Now show/hide layer
		if (document.getElementById)
		{
			theLayer = document.getElementById(layerID);
			theLayer.style.display = showString;
		}
		else if (document.all)
		{
			theLayer = document.all.layerID;
			theLayer.style.display = showString;
		}

		return true;
	}
</script>

<table width="525" cellpadding="5" cellspacing="0" border="1">
	<form name="calcForm" action="calc.cfm" method="post">
	<thead>
		<tr>
			<td width="20">&nbsp;</td>
			<td colspan="5"><strong>Category</strong></td>

		</tr>
		<tr>
			<td width="20">&nbsp;</td>
			<td width="25">&nbsp;</td>
			<td width="200"><strong>Item</strong></td>
			<td width="75" align="center"><strong>Item Size</strong></td>
			<td width="75" align="center"><strong>Quantity</strong></td>

			<td width="75" align="center"><strong>Total Size</strong></td>
		</tr>
	</thead>

	<tbody id="head1">
		<tr>
			<td><img id="expand1" src="images/plus.gif" width="15" height="15" alt="+" title="Expand Category" border="0" onmouseover="swapImage(this,'over');" onmouseout="swapImage(this,'out');" style="cursor:hand;" onclick="showHide(this,1);"></td>
			<td colspan="4"><strong>Appliances</strong></td>

			<td align="center"><input type="text" name="cat_1" value="0" size="3" onfocus="this.blur();" /></td>
		</tr>
	</tbody>
	<tbody id="cat1" style="display:none;">

			<tr>
				<td colspan="2">&nbsp;</td>
				<td>Trash Compactor</td>
				<td align="center">

					15
					<input type="hidden" name="itemSF_14" value="15" />
				</td>
				<td align="center"><input type="text" name="item_14" value="0" onchange="calculateItemTotal(this, this.form.itemTot_14,this.form.itemSF_14);calculateTotal(this.form);" size="3" tabindex="1" /></td>

				<td align="center"><input type="text" name="itemTot_14" value="0" size="3" onfocus="this.blur();" /></td>
			</tr>
		<tr>
			<td colspan="6">
				&nbsp;
			</td>
		</tr>

	</tbody>

	<tbody id="head2">
		<tr>
			<td><img id="expand2" src="images/plus.gif" width="15" height="15" alt="+" title="Expand Category" border="0" onmouseover="swapImage(this,'over');" onmouseout="swapImage(this,'out');" style="cursor:hand;" onclick="showHide(this,2);"></td>
			<td colspan="4"><strong>Bedroom</strong></td>
			<td align="center"><input type="text" name="cat_2" value="0" size="3" onfocus="this.blur();" /></td>
		</tr>
	</tbody>

	<tbody id="cat2" style="display:none;">

			<tr>
				<td colspan="2">&nbsp;</td>
				<td>Waterbed Base</td>
				<td align="center">
					10
					<input type="hidden" name="itemSF_42" value="10" />
				</td>
				<td align="center"><input type="text" name="item_42" value="1" onchange="calculateItemTotal(this, this.form.itemTot_42,this.form.itemSF_42);calculateTotal(this.form);" size="3" tabindex="17" /></td>


				<td align="center"><input type="text" name="itemTot_42" value="10" size="3" onfocus="this.blur();" /></td>
			</tr>

		<tr>
			<td colspan="6">
				&nbsp;
			</td>
		</tr>
	</tbody>

	<tfoot>
		<tr>

			<td colspan="5">
				<strong>Total Square Feet:</strong>
			</td>
			<td align="center"><input type="text" name="totalSF" value="1877" size="5" onfocus="this.blur();" /></td>
		</tr>
		<tr>
			<td colspan="6">
				<input type="hidden" name="step" value="2">

				<input type="hidden" name="hsize" value="2">
				<input type="submit" name="submit" value="Go!">
			</td>
		</tr>
	</tfoot>
	</form>
</table>

------------------------
END CODE
------------------------

Thanks!

---------------------------
Scott Brady
http://www.scottbrady.net/