TAL模板生成表格悬停显示信息Div/表头功能失效求助

Hey there! Let's work through those two hover problems you're facing with your TAL-rendered tables. From what you've shared, here are the most likely fixes based on common pitfalls with dynamic templates and jQuery events:

1. Fixing "Show Table Header on Cell Hover" #

The biggest culprit here is usually event binding timing—since TAL renders tables dynamically (via tal:repeat), your initial jQuery code might be trying to bind events before the table cells even exist in the DOM. Here's how to fix it:

Use Event Delegation #

Instead of binding directly to td elements, attach the event to a static parent element (like document or your container div) and delegate it to the dynamic cells:

// Wait for the DOM to be fully loaded first
$(document).ready(function() {
  // Delegated mouseenter event for table cells
  $(document).on('mouseenter', 'td', function() {
    // Get the corresponding header text for this cell's column
    var columnIndex = $(this).index();
    var headerText = $(this).closest('table').find('th').eq(columnIndex).text();
    
    // Replace this with your existing tooltip logic (e.g., show a tooltip with headerText)
    console.log('Hovered cell belongs to header:', headerText);
    // Example: If using a custom tooltip div
    // $('#cell-tooltip').text(headerText).show().position({my: 'left top', at: 'right bottom', of: $(this)});
  });

  // Don't forget the mouseleave event to hide the tooltip
  $(document).on('mouseleave', 'td', function() {
    // Hide your tooltip here
    // $('#cell-tooltip').hide();
  });
});

Double-Check Header-Cell Index Matching #

Make sure your table doesn't have merged cells (colspan/rowspan)—those can break the index() matching between cells and headers. If you do have merged cells, you'll need to adjust the logic to map cells to their correct headers manually.

2. Fixing "Show Info Div on Table Hover" #

Same event binding issue applies here, plus you need to ensure each table is linked to its corresponding info div correctly. Here's a step-by-step fix:

Step 1: Add Unique Identifiers in TAL #

First, modify your TAL template to add a unique data attribute to each table and its matching info div. For example:

<!-- TAL template: Add data-machine-id to the table -->
<div class="container" tal:repeat="machine_result item.items()">
  <table class="machine-table" data-machine-id="${machine_result.0}">
    <!-- Your table content here -->
  </table>
  
  <!-- Corresponding info div with matching ID -->
  <div class="machine-info" id="info-${machine_result.0}" style="display: none;">
    <!-- Info content here -->
  </div>
</div>

Step 2: Use Delegated Hover Events #

Bind the hover event to a static parent, then target the dynamic tables and their matching info divs:

$(document).ready(function() {
  // Delegated hover event for tables
  $(document).on('mouseenter', '.machine-table', function() {
    var machineId = $(this).data('machine-id');
    // Show the matching info div
    $('#info-' + machineId).show();
  });

  $(document).on('mouseleave', '.machine-table', function() {
    var machineId = $(this).data('machine-id');
    // Hide the info div when leaving the table
    $('#info-' + machineId).hide();
  });
});

Additional Checks #

• Make sure your info divs aren't hidden by conflicting CSS (e.g., display: none is set correctly, and no other styles are overriding the show() command).
• Verify that the machine_result.0 value is unique for each iteration—duplicate IDs will break the selector logic.

Quick Debugging Tips #

• Open your browser's DevTools (F12) and check the Elements tab to confirm that TAL is rendering the tables and info divs with the correct attributes/IDs.
• Use the Console tab to log variables (like machineId or headerText) to see if they're being retrieved correctly.
• Test if the events are firing by adding console.log('Event triggered!') inside the event handlers.

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