Javascript Visibility

[awitt]

Hey Guys, I'm building a table using Java on a JSP, and I have a portion of the table that I want to either hide or display, depending on if a box is checked or not (it's the old is-your-shipping-address-the-same-as-your-billing checkbox from a checkout page). Here's the JS function that gets called when the box is clicked.

<span id="shippingInfo">                    <tr>                        <td colspan="2"><br /><hr /></td>                    </tr>                    <tr>                        <td colspan="2" class="sectionHeader">-- Shipping Information --</td>                    </tr>                    <tr>                        <td colspan="2"><hr /><br /></td>                    </tr>                                        <tr>                        <td class="inputDescriptors">First Name:</td>                        <td>                            <html:text                                property="firstName"                                name="checkoutForm"                                size="50"                                maxlength="50"                                styleClass="inputBoxes"                                tabindex="" />                        </td>                    </tr>                                        <tr>                        <td class="inputDescriptors">Last Name:</td>                        <td>                            <html:text                                property="lastName"                                name="checkoutForm"                                size="50"                                maxlength="100"                                styleClass="inputBoxes"                                tabindex="" />                        </td>                    </tr>                                        <tr>                        <td class="inputDescriptors">Company Name:</td>                        <td>                            <html:text                                property="companyName"                                name="checkoutForm"                                size="50"                                maxlength="100"                                styleClass="inputBoxes"                                tabindex="" />                        </td>                    </tr>                                        <tr>                        <td class="inputDescriptors">Address:</td>                        <td>                            <html:text                                property="address1"                                name="checkoutForm"                                size="50"                                maxlength="100"                                styleClass="inputBoxes"                                tabindex="" />                        </td>                    </tr>                                        <tr>                        <td class="inputDescriptors">Address 2 (optional):</td>                        <td>                            <html:text                                property="address2"                                name="checkoutForm"                                size="50"                                maxlength="50"                                styleClass="inputBoxes"                                tabindex="" />                        </td>                    </tr>                                        <tr>                        <td class="inputDescriptors">City:</td>                        <td>                            <html:text                                property="city"                                name="checkoutForm"                                size="50"                                maxlength="50"                                styleClass="inputBoxes"                                tabindex="" />                        </td>                    </tr>                                        <tr>                        <td class="inputDescriptors">State:</td>                        <td>                            <html:select property="stateID">                                <html:option value="0" disabled="true">-- Select State --</html:option>                                <html:optionsCollection                                    name="checkoutForm"                                    property="stateList"                                    label="label"                                    value="value">                            </html:optionsCollection>                            </html:select>                        </td>                    </tr>                                        <tr>                        <td class="inputDescriptors">Zip Code:</td>                        <td>                            <html:text                                property="postalCode"                                name="checkoutForm"                                size="50"                                maxlength="5"                                styleClass="inputBoxes"                                tabindex="" />                        </td>                    </tr>                </span>

Now, I think one of the issues may be that a div or span tag are not valid tags within a table element. If that's true, then how can I specify what part of the table I want to hide or display? Any help would be appreciated.

[justsomeguy]

That's correct, you can't add any elements inside a table other than tr, thead, tbody, etc. One obvious way is to make a new table and show/hide the entire table. If you don't want to do that, you can give each row to hide a certain class name, and in the show/hide function get all tr elements and check for the correct class name before changing the visibility.