Скрытие тегов tr в тегах div с помощью jQuery

Question

EDIT

Я редактирую это, так как кажется, что многие фокусируются на html-форматировании, а не на вопросе. Мои извинения

Да, конечно, тег div находится внутри таблицы, и да, конечно, скрытие тега в jquery вызывается после загрузки DOM

---

Jquery выглядит следующим образом;

$(document).ready(function() {

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

HTML выглядит следующим образом;

<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>

Привет,

Это простой, и я видел другие посты по этому вопросу, но, как ни странно, ответ не работает.

У меня есть тег div

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

и при загрузке jquery я запускаю

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

но tr td и input все еще видны при загрузке

есть идеи?

Answer 1

Я бы предложил сделать ваш assessmentStatusReason классом вместо идентификатора, чтобы вы могли скрыть несколько строк.

<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>

Тогда используйте этот скрипт:

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

Answer 2

Вам нужен div, не так ли плохая разметка?

вы можете скрыть tr так же легко, даже если вы скрываете tr (или div) контент, который не будет отображаться, так зачем пытаться скрыть детей?

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

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

Answer 3

Это работает для меня. Проблема в том, что вам нужно дождаться загрузки HTML. Вот полностью функциональный пример:

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

</script>

Причина:

Answer 4

Попробуйте и посмотрите, если это не так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>

Я заметил, что div не соответствует настройке типа <table></table>. Это, вероятно, имеет значение.

Answer 5

Присвойте идентификатор "valuationStatusReason "тегу tr. Или, если вы хотите скрыть более одного tr, сделайте его классом и вызовите $ ('.valuationStatusReason'). Hide ().