Question

我已经编码显示没有标题的表格主体的点击事件。现在我在页面加载后立即获取表头，这不应该发生。我只需要在提交表单时以及正文中是否有元素时才显示表头。

Javascript如下：

var getNameOfEmployee = document.getElementById('getNameOfEmployeeID');
  function displayEmployee(){

        if (getNameOfEmployee.value != "") {
             $("#searchForm").submit(function (event) {
             event.preventDefault();
             });

             AjaxGet();
        }
        else{
            alert("Please enter any name of employee that you wish to know the extension code of!");
        }
  }

  AjaxGet = function (url, storageLocation, mySuccessCallback) {

        var result = $.ajax({
            type: "GET",
            url: 'http://localhost:8080/emp/' +$("#getNameOfEmployeeID").val(),
            param: '{}',
            contentType: "application/json",
            dataType: "json",
            success: function (data) {

                storageLocation = data;


                var txt = "";

                var length = Object.keys(storageLocation).length;
                $.each(storageLocation, function (index, value) {

                    $("#searchForm #someLabel" + index).val(value.name);
                    txt += "<tr><td>"+value.name+"</td><td>"+value.course+"</td><td>"+value.department+"</td></tr>";
                });

                 if(txt != ""){

                     $("#searchTableID tbody").html(txt);
                 }
            }
        }).responseText ;
  };

我点击事件的HTML代码是

<!DOCTYPE html>
<html lang="en" xmlns:margin-right="http://www.w3.org/1999/xhtml" xmlns:padding-bottom="http://www.w3.org/1999/xhtml"
      xmlns:width="http://www.w3.org/1999/xhtml">

<body>

    <!--search bar-->
    <div class="wrap" >
        <form id="searchForm" >
            <div >
            <input type="text" id='getNameOfEmployeeID' class="searchTerm" placeholder="Employee Name" name = "employeeNamePassToURL">
                <button type="submit" onclick='displayEmployee()' class="searchButton" id="submitid">
                    <i class="fa fa-search"></i>
                </button></div>

        </form>
    </div>

    <!--table for search results-->
    <div class = "container" >
        <table  id = "searchTableID"
                class= "table-responsive container table table-hover table-bordered table-striped"
                style="float:left; width:40%; margin-left: 1%; margin-top:10%">
            <thead style = "background-color: #800080; color: white;">
            </thead>
            <tbody></tbody>
        </table>
    </div>

    <script src = "js/jquery-3.2.1.min.js"></script>
    <script src ="js/bootstrap.min.js"></script>
    <script src = "js/main.js"></script>

</body>

Answer 1

最初隐藏表并在成功方法结束时查找行数

按如下方式调整html表：

 <table  id="searchTableID"
                    class= "table-responsive container table table-hover table-bordered table-striped"
                    style="float:left; width:40%; margin-left: 1%; margin-top:10%;display:none;">
        <thead style="background-color: #800080; color: white;">
            <tr>
                <td>Name</td>
                <td>Course</td>
                <td>Department</td>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

在ajax成功方法结束时使用以下代码

if($("table#searchTableID tbody tr").length < 1)
{
    $("table#searchTableID").hide();
}
else
{
    $("table#searchTableID").show();
}

-

...
if(txt != ""){
     $("#searchTableID thead").html(txt);
     $("#searchTableID tbody").html(txt);
}
if($("table#searchTableID tbody tr").length < 1)
{
    $("table#searchTableID").hide();
}
else
{
    $("table#searchTableID").show();
}

仅当tbody至少有一行时才显示表头

1 个答案: