jquery - 如何根据使用点击输入隐藏和显示div

Question

在这里，我必须在单击输入时隐藏 div id #second_area。 ID 名称是 #employee_id

<form id="search_form" name="search_form" method="get" action="" >

        <table width="98%" id="performance_tbl" align="center">

          <div id="first_row">  
          <tr class="first_tr">
            <th scope="row"><label for="employee_id">Employee ID: </label></th>
            <td><input type="text" name="employee_id" id="employee_id" /></td>
          </tr>
          </div>

          <tr>
            <td>&nbsp;</td>
          </tr>

          <div id="second_area">
           <tr>
            <th scope="row"><label for="company_id">Company Name:</label></th>
            <td><input type="text" name="company_id" id="company_id" /></td>
            <th><label for="department_id">Department Name: </label></th>
            <td><input type="text" name="department_id" id="department_id" /></td>
          </tr>

          <tr>
            <th scope="row"><label for="current_year">Select Year: </label></th>
            <td><input type="number" name="current_year" id="current_year" /></td>
            <th><label for="compare_year">Compare Year: </label></th>
            <td><input type="number" name="compare_year" id="compare_year" /></td>
          </tr>

          <tr>
            <th scope="row"><label for="month_from">Month From: </label></th>
            <td><input type="number" name="month_from" id="month_from" /></td>
            <th><label for="month_to">Month To: </label></th>
            <td><input type="number" name="month_to" id="month_to" /></td>
          </tr>

          <tr>
            <th scope="row"><label for="srch_gender">Select Gender: </label></th>
          <td>
                <table>
                <tr>
                    <td><input type="radio" name="gender" id="female" value="0">FeMale</td>
                    <td><input type="radio" name="gender" id="male" value="1">Male</td>
                </tr>
                </table>
            </td>
          </tr>
          </div>
          <tr>
            <td>&nbsp;</td>
            <td colspan="2"><input type="submit" name="search_kpi" id="search_kpi" value="Search Now"></td>
          </tr>
    </table>
</form>

这是我的 jQuery 代码。我怎样才能运行代码？如果我从 #first_area id div 输入中释放光标，请给我建议如何再次显示我的 #second_area div

$(document).ready(function() {
    $('#employee_id').focus(function() {
        $('#second_area').hide();
    });
});

Answer 1

这是因为，你不能插入<div>在一张 table 里面。

您可以尝试其他方式来实现您的要求，

删除所有 <div>表格内的标签。

为您的每个 <tr> 添加类(class)在你的里面 <div id="#second_area">

所以，你的最终代码应该是这样的，

<form id="search_form" name="search_form" method="get" action="">
        <table width="98%" id="performance_tbl" align="center">
            <tr class="first_tr">
                <th scope="row"><label for="employee_id">Employee ID: </label></th>
                <td><input type="text" name="employee_id" id="employee_id" /></td>
            </tr>
            <tr>


                <td>&nbsp;</td>
            </tr>
            <!-- added class 'second_area'-->
            <tr class="second_area">
                <th scope="row"><label for="company_id">Company Name:</label></th>
                <td><input type="text" name="company_id" id="company_id" /></td>
                <th><label for="department_id">Department Name: </label></th>
                <td><input type="text" name="department_id" id="department_id" /></td>
            </tr>
            <!-- added class 'second_area'-->
            <tr class="second_area">
                <th scope="row"><label for="current_year">Select Year: </label></th>
                <td><input type="number" name="current_year" id="current_year" /></td>
                <th><label for="compare_year">Compare Year: </label></th>
                <td><input type="number" name="compare_year" id="compare_year" /></td>
            </tr>
            <!-- added class 'second_area'-->
            <tr class="second_area">
                <th scope="row"><label for="month_from">Month From: </label></th>
                <td><input type="number" name="month_from" id="month_from" /></td>
                <th><label for="month_to">Month To: </label></th>
                <td><input type="number" name="month_to" id="month_to" /></td>
            </tr>
            <!-- added class 'second_area'-->
            <tr class="second_area">
                <th scope="row"><label for="srch_gender">Select Gender: </label></th>
                <td>
                    <table>
                        <tr>
                            <td><input type="radio" name="gender" id="female" value="0">FeMale</td>
                            <td><input type="radio" name="gender" id="male" value="1">Male</td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td colspan="2"><input type="submit" name="search_kpi" id="search_kpi" value="Search Now"></td>
            </tr>
        </table>
    </form>

你的 javascript 应该像这样改变，

        $(document).ready(function () {
            $('#employee_id').focus(function () {
                $('.second_area').hide();
            });
        });