jQuery实现点击父行Unique ID展开子表格问题求助

我来帮你梳理下问题所在，然后一步步修正代码：

问题分析 #

1. 事件绑定失效：父表格的行是动态生成的，直接给a标签绑定点击事件会因为元素还未创建而失效，得用事件委托来绑定才能生效。
2. 子数据获取错误：generateItem()返回的是数组，你直接用subTableData.Description会拿到undefined，应该根据点击的UniqueId找到数组中对应的元素，再取它的Description和Arrival字段。
3. 子表格填充逻辑问题：原代码克隆表格后拼接HTML的方式不够严谨，应该先找到对应数据，再把数据精准填充到克隆的表格tbody里。

修正后的完整代码 #

HTML部分

<table id="parentTable">
  <thead>
    <tr>
      <th>Unique ID</th>
      <th>Name</th>
      <th>Email</th>
      <th>Price</th>
      <th>Hours</th>
    </tr>
  </thead>
  <tbody id="parentTableBody">
  </tbody>
</table>
<div id="subTableContainer" style="display: none;">
  <table>
    <thead>
      <tr>
        <th>Description</th>
        <th>Arrival</th>
      </tr>
    </thead>
    <tbody id="subTableBody">
    </tbody>
  </table>
</div>

jQuery部分

$(document).ready(function(){
  var arr1 = generateItem();
  if(arr1){
    var arr2 = [].concat(arr1);
    var tr;
    $.each(arr2, function(i,e) {
      tr = $('<tr>');
      tr.append("<td>" + "<a href='#'>" + (e.UniqueId || "") + "</a>" + "</td>");
      tr.append("<td>" + (e.Name || "") + "</td>");
      tr.append("<td>" + (e.Email || "") + "</td>");
      tr.append("<td>" + (e.Price || "") + "</td>");
      tr.append("<td>" + (e.Hours || "") + "</td>");
      $('#parentTableBody').append(tr);
    });
  }
});

function generateItem(){
  var item = [
    {UniqueId: "0",Name: "Alex", Email: "alex@email.com", Price: "$20.00", Hours: "1", Description: "N/A", Arrival: "Noon"},
    {UniqueId: "1", Name: "Jay", Email: "jay@email.com", Price: "$12.00", Hours: "0.2", Description: "Small", Arrival: "Morning"},
    {UniqueId: "2" ,Name: "Dylan", Email: "dylan@email.com", Price: "$32.00", Hours: "2.2", Description: "Heavy", Arrival: "Night"}
  ];
  return item;
}

$(function(){
  // 用事件委托绑定点击事件，解决动态元素绑定失效问题
  $('#parentTable').on("click", "tbody a", function(event) {
    event.preventDefault(); // 阻止a标签默认跳转行为
    var clickedId = $(this).text();
    var $baseRow = $(this).closest("tr");
    var $nextRow = $baseRow.next("tr");

    // 判断是否已经展开子表格
    if ($nextRow.find("table").length === 0) {
      var allItems = generateItem();
      // 根据UniqueId找到对应的子数据
      var targetItem = allItems.find(item => item.UniqueId === clickedId);
      
      if (targetItem) {
        // 克隆子表格模板
        var subTableHTML = $("#subTableContainer table").clone(true);
        // 填充子表格数据
        var subRow = $('<tr>')
          .append("<td>" + targetItem.Description + "</td>")
          .append("<td>" + targetItem.Arrival + "</td>");
        subTableHTML.find("#subTableBody").append(subRow);
        
        // 创建包含子表格的行并插入到父行下方
        var subRowWrapper = $('<tr>').append($('<td colspan="5">').append(subTableHTML));
        $baseRow.after(subRowWrapper);
      }
    } else {
      // 已展开则移除子行
      $nextRow.remove();
    }
  });
});

关键修改点说明 #

• 事件委托：把点击事件绑定到父表格#parentTable上，监听内部tbody a的点击，这样动态生成的a标签也能正常触发事件。
• 匹配对应数据：用Array.find()根据点击的UniqueId从数组中找到对应的元素，彻底解决了undefined的问题。
• 完善子表格填充：克隆模板后，先创建包含子数据的行，再插入到克隆表格的tbody中，逻辑更清晰也更易维护。
• 阻止默认行为：给a标签添加event.preventDefault()，避免点击后页面跳转回到顶部的问题。

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