Jump to content

Javascript Visibility


awitt
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...