导入JSON数据的员工表格点击<th>排序失效，JS新手求助排查

Hey there! Let's break down why your table header clicks aren't triggering sorting—since you're new to JS, I'll walk through the most common issues and fixes based on what you've shared.

1. Event Binding for Dynamic Elements (The #1 Culprit) #

Your table rows and headers are generated dynamically after loading the JSON with $.getJSON. That means when your initial script runs, those <th> elements don't exist in the DOM yet. Using a regular $('th').click() won't work because jQuery can't bind events to elements that aren't there.

Fix: Use Event Delegation
Instead of binding directly to <th>, attach the event to a parent element that exists when the page loads (like document or the table itself):

// Bind click to all <th> elements, even ones added later
$(document).on('click', 'th', function() {
  // Your sorting logic will go here
});

2. Missing Sort Logic & Table Re-Rendering #

You had a commented-out sort function, but you haven't connected it to the header clicks. Plus, once you sort the data, you need to re-render the table with the sorted list.

Step 1: Add Data Keys to Your Headers
First, update your <th> elements to include a data-key attribute that maps to the JSON fields (like id, name, etc.):

<th data-key="id">ID</th>
<th data-key="name">Name</th>
<th data-key="salary">Salary</th>

Step 2: Extract Render Logic into a Reusable Function
Instead of building the table HTML once, make a function you can call again after sorting:

function renderEmployees(employees) {
  let employeeList = "";
  $.each(employees, function(index, employee) {
    employeeList += `
      <tr>
        <td>${employee.id}</td>
        <td>${employee.name}</td>
        <td>${employee.salary}</td>
        <!-- Add other employee fields here -->
      </tr>
    `;
  });
  // Replace the table body with the new HTML
  $('#employee-table tbody').html(employeeList);
}

Step 3: Add Sorting to the Header Click
Now tie it all together in the click event, including logic to handle ascending/descending sorting:

$(document).ready(function() {
  // Hold the raw employee data so we can re-sort it
  let employeeData;

  $.getJSON("dane.json", function(data) {
    employeeData = data;
    // Render initial table
    renderEmployees(employeeData);

    // Bind sort event to headers
    $(document).on('click', 'th', function() {
      const sortKey = $(this).data('key');
      // Track current sort order (default to ascending)
      const currentOrder = $(this).data('sort-order') || 'asc';
      
      // Sort the data based on the key and order
      employeeData.sort(function(a, b) {
        if (typeof a[sortKey] === 'number') {
          // Numeric sort
          return currentOrder === 'asc' ? a[sortKey] - b[sortKey] : b[sortKey] - a[sortKey];
        } else {
          // String sort (handles names, etc.)
          return currentOrder === 'asc' 
            ? a[sortKey].localeCompare(b[sortKey]) 
            : b[sortKey].localeCompare(a[sortKey]);
        }
      });

      // Toggle the sort order for next click
      $(this).data('sort-order', currentOrder === 'asc' ? 'desc' : 'asc');
      
      // Re-render the table with sorted data
      renderEmployees(employeeData);
    });
  }).fail(function() {
    // Catch JSON loading errors (super helpful for debugging!)
    console.error("Failed to load employee data—check your JSON file path!");
  });
});

3. Quick Debugging Checks for Newbies #

• Check the Browser Console: Hit F12, go to the Console tab. Look for errors like "jQuery is not defined" (means you forgot to load jQuery) or "Failed to load resource" (means your dane.json path is wrong).
• Verify JSON Path: Make sure dane.json is in the same folder as your HTML file, or use the correct relative path.
• Test with Static Data: If you're still stuck, replace the $.getJSON call with a hardcoded array of employee data to rule out AJAX issues.

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