[thelist] Hiding/showing table rows in Mozilla
Mark Kennedy
mark at eurogamer.net
Thu Mar 6 05:41:00 CST 2003
You want to use 'display: table-row-group' for <tbody> elements, not 'inline'.
It's a CSS2 thing.
Also, I'm not sure if you're supposed to stick the <form> tag inside your table
like that. Your best bet would be to wrap it around the table. If this causes
formatting problems, try style="display: inline;" for the form (usually fixes
problems for me).
Hope that helps!
Mark
On Wed, 5 Mar 2003, Scott Brady wrote:
>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"> </td>
> <td colspan="5"><strong>Category</strong></td>
>
> </tr>
> <tr>
> <td width="20"> </td>
> <td width="25"> </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"> </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">
>
> </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"> </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">
>
> </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/
>
>--
>* * Please support the community that supports you. * *
>http://evolt.org/help_support_evolt/
>
>For unsubscribe and other options, including the Tip Harvester
>and archives of thelist go to: http://lists.evolt.org
>Workers of the Web, evolt !
>
More information about the thelist
mailing list