实现仅当tbody有数据时显示表格表头：解决页面加载即显表头问题

Hey there! Let's get this sorted out—you want the table header to only show up after you submit the form and there's actual data in the table body, right? Here's how to tweak your code to make that happen:

Step 1: Hide the Header by Default #

First, we need to make sure the header is hidden when the page loads. Update your <thead> tag in the HTML to add display:none; to its style (don't forget your actual header rows inside too!):

<thead style="background-color: #800080; color: white; display:none;">
  <tr>
    <th>Employee Name</th>
    <th>Course</th>
    <th>Department</th>
  </tr>
</thead>

This way, the header won't be visible until we explicitly show it later.

Step 2: Update the AJAX Logic to Toggle Header Visibility #

Next, modify your AjaxGet function to show the header only when we have data to display, and hide it if there's no matching employee:

AjaxGet = function (url, storageLocation, mySuccessCallback) {
  $.ajax({
    type: "GET",
    url: 'http://localhost:8080/emp/' + $("#getNameOfEmployeeID").val(),
    contentType: "application/json",
    dataType: "json",
    success: function (data) {
      storageLocation = data;
      var txt = "";
      
      $.each(data, function (index, value) {
        $("#searchForm #someLabel" + index).val(value.name);
        txt += "<tr><td>"+value.name+"</td><td>"+value.course+"</td><td>"+value.department+"</td></tr>";
      });
      
      const $tableHeader = $("#searchTableID thead");
      const $tableBody = $("#searchTableID tbody");
      
      if (txt !== "") {
        // We have data: populate the body and show the header
        $tableBody.html(txt);
        $tableHeader.show();
      } else {
        // No data: clear the body and hide the header
        $tableBody.empty();
        $tableHeader.hide();
        alert("No employees found matching your search!");
      }
    }
  });
};

I cleaned up a bit of redundant code (like removing the unused result variable) but kept your core logic intact.

Step 3: Improve Form Submission Handling #

Right now, you're binding the form's submit event every time the button is clicked, which can cause duplicate event triggers. Let's fix that by binding the event once, outside the displayEmployee function:

const getNameOfEmployee = document.getElementById('getNameOfEmployeeID');

// Bind form submit once on page load
$("#searchForm").submit(function (event) {
  event.preventDefault();
  displayEmployee();
});

function displayEmployee(){
  const inputValue = getNameOfEmployee.value.trim();
  if (inputValue !== "") {
    AjaxGet();
  } else {
    alert("Please enter any name of employee that you wish to know the extension code of!");
    // Also clear/hide the table if input is empty
    $("#searchTableID tbody").empty();
    $("#searchTableID thead").hide();
  }
}

This way, both clicking the search button and pressing Enter in the input will trigger the search, and we avoid weird duplicate requests.

Why This Works #

Your original issue was that the header was present in the DOM from page load, so it was visible even without data. By hiding it by default and only showing it when we have valid results, we match exactly what you're asking for.

内容的提问来源于stack exchange，提问作者user9272054