Hiding tr tags within div tags using jQuery

Question

EDIT

I am editing this as it appears the many are focosing on the html formatting instead of the question. My apologies

Yes of course the div tag is sitting inside a table and yes of course the hiding of the tag in jquery is called once the DOM has been loaded

---

The Jquery is as follows;

$(document).ready(function() {

    //naturally there is more in this file but this is all that happens to this tag
   $("#assessmentStatusReason").children().hide();
}

The HTML is as follows;

<table>

        <tr><td class="fieldLabelBold"><label>CRN:</label></td>
        <td class="fieldText" id="uxCRN"></td></tr>

        <tr><td class="fieldLabelBold">
                <label>
                    Jobseeker Id:</label>
            </td>
            <td class="fieldText" id="uxJobseekerId">
            </td>
        </tr>
        <tr>
            <td class="fieldLabelBold">
                <label>
                    Name:</label>
            </td>
            <td class="fieldText" id="uxName">
            </td>
        </tr>
        <tr>
            <td class="fieldLabelBold">
                <label>
                    Date Of Birth:</label>
            </td>
            <td class="fieldText" id="uxDateOfBirth">
            </td>
        </tr>
        <tr>
            <td class="fieldLabelBold">
                <label>
                    Gender:</label>
            </td>
            <td class="fieldText" id="uxGender">
            </td>
        </tr>
        <tr>
            <td class="fieldLabelBold">
                <label>
                    Phone:</label>
            </td>
            <td class="fieldText" id="uxPhone">
            </td>
        </tr>
        <tr>
            <td class="fieldLabelBold">
                <label>
                    Mobile:</label>
            </td>
            <td class="fieldText" id="uxMobile">
            </td>
        </tr>

        <div>
        <h3>Addresses</h3>
        </div>

        <tr>
            <td class="fieldLabelBold">
                <label>
                    Residential Address:</label>
            </td>
            <td class="fieldText" id="uxResidentialAddress">
            </td>
        </tr>
        <tr>
            <td class="fieldLabelBold">
                <label>
                    Postal Address:</label>
            </td>
            <td class="fieldText" id="uxPostalAddress">
            </td>
        </tr>
        <tr>
            <td class="fieldLabelBold">
                <label>
                    Interpreter Required:</label>
            </td>
            <td class="fieldText" id="uxInterpreterRequired">
            </td>
        </tr>
        <tr>
            <td class="fieldLabelBold">
                <label>
                    Language:</label>
            </td>
            <td class="fieldText" id="uxLanguage">
            </td>
        </tr>

        <tr>
            <td class="fieldLabelBold ">
                <label>
                    Assessment Status:</label>
            </td>
            <td width="300px">                
                !{Html.DropDownList("assessmentDecision", Model.ReferralStatus, new { id = "uxassessmentDecision" })}
            </td>
        </tr>
        <div id="assessmentStatusReason">
        <tr id="uxNoShowDate">
      <td class="fieldLabelBold"><label>No Show Date:</label></td>
      <td>!{Html.DatePicker("uxNoShowDate", null, true, "100px")}</td>
     </tr>        

        <tr id="uxReferralDeclinedReasonCode" >
      <td class="fieldLabelBold"><label>Declined Reason:</label></td>
      <td>!{Html.DropDownList("DeclinedReason", Model.ReferralDeclinedReasonCode, new { id = "uxDeclineReasonCode" })}</td>
     </tr>       
        </div>
        </table>

Hi,

This is such as basic and I've seen the other posts on this kind of question but the answer strangely enough does not seem to work.

I have a div tag

<div id="assessmentStatusReason">
        <tr>
            <td class="fieldLabelBold"><label>Reason:</label></td>
            <td class="fieldText" id="uxLanguage"><input id="reasonInput2" /></td>
        </tr>
        </div>

and on the loading of the jquery I run

$("#assessmentStatusReason").children().hide();

but the tr td and input are still visible on loading

any ideas?

Answer 1

It works for me. The problem is you need to wait until the HTML has loaded. Here's a fully functional example:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"&gt;&lt;/script&gt;
<body>
<pre>
<script>
    $(document).ready(function() {
        $("#assessmentStatusReason").children().hide();
    })

</script>
</pre>
<div id="assessmentStatusReason">
        <tr>
            <td class="fieldLabelBold"><label>Reason:</label></td>
            <td class="fieldText" id="uxLanguage"><input id="reasonInput2" /></td>
        </tr>
</div>

Answer 2

Give the "assessmentStatusReason" id to the tr tag. Or if there is more than one tr you want to hide, make it a class and call $('.assessmentStatusReason').hide().

Answer 3

Do you need the div, isnt that bad markup?

you can hide the tr just as easily, also if you hide the tr (or div) the content wont show so why try to hide the children?

<tr id="assessmentStatusReason">
  <td>...</td>
  <td>...</td>
</tr>

$(document).ready(function() {
    $("#assessmentStatusReason").hide();
})

Answer 4

Try this out and see if it makes a differnce:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
    <title></title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

</head>
<body>
    <div id="assessmentStatusReason">
        <table>
            <tr>
                <td class="fieldLabelBold">
                    <label>
                        Reason:</label>
                </td>
                <td class="fieldText" id="uxLanguage">
                    <input id="reasonInput2" />
                </td>
            </tr>
        </table>
    </div>
</body>

<script type="text/javascript">
    $(document).ready(function() {
        $("#assessmentStatusReason").children().hide();
    });  
</script>

</html>

I noticed that the div isn't surrounding a <table></table> type setup. That probably makes a difference.

Answer 5

I would suggest making your assessmentStatusReason a class instead of an ID, this way you can hide multiple rows.

<tr class="assessmentStatusReason">
 <td class="fieldLabelBold"><label>Reason:</label></td>
 <td class="fieldText"><input id="reasonInput1" /></td>
</tr>
<tr class="assessmentStatusReason">
 <td class="fieldLabelBold"><label>Reason:</label></td>
 <td class="fieldText"><input id="reasonInput2" /></td>
</tr>

Then use this script:

$(document).ready(function() {
    $(".assessmentStatusReason").hide();
});