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代码。我该如何运行代码？如果我从#second_area id div输入中释放光标，请给我建议如何再次显示我的#first_area div

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

Answer 1

这是因为，您无法在表格中插入<div>。

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

删除表格中的所有<div>代码。

为您<tr>

中的每个<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();
            });
        });

Answer 2

div元素不是表元素的有效子元素。实现目标的一种方法可能是将您想要的所有行 toggle() 设为一个共同的类，例如 second_area ，并将其作为目标那个班。同时使用focusin和focusout个事件：

$(document).ready(function() {
    $('#employee_id').on('focusin focusout', function() {
        $('.second_area').toggle();
    });
});

＆＃13;

$(document).ready(function() {
    $('#employee_id').on('focusin focusout', function() {
        $('.second_area').toggle();
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

           <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>

          <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>

          <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>

          <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>

＆＃13;

Answer 3

你已经到了一半。如果您想在文本输入的焦点期间隐藏#second_area，然后在焦点离开时显示它，您还需要使用 blur ^{jQuery API}

$(function() {
    var second = $("#second_area");
    $('#employee_id').focus(function() {
        second.hide();
    }).blur(function(){ // event for when focus is lost
        second.show();
    });
});

如何使用点击输入隐藏和显示div

3 个答案: