如何使用JavaScript实现点击HTML表格父行显示子行功能

我来帮你搞定这个需求！咱们先修正原代码里的几个小问题，再一步步实现点击父行显示对应子行的功能：

原代码的几个问题先梳理下： #

• 每次点击按钮都重新创建整个表格，会覆盖之前的内容，应该直接向现有表格的tbody追加行
• 父行的HTML有多余的</td>标签，属于语法错误
• 没有给父行设置唯一ID、子行设置关联类，也没有默认隐藏子行的逻辑

修正后的完整实现代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
/* 默认隐藏子行 */
.child-row {
    display: none;
}
/* 给父行加个光标样式，提示可点击 */
.parent-row {
    cursor: pointer;
    background-color: #f5f5f5;
}
</style>
<div id="container">
  <div id="table">
    <!-- 先初始化表格结构，避免每次点击按钮重建 -->
    <table border="1">
      <thead>
        <tr>
          <th>col1</th>
          <th>col2</th>
          <th>col3</th>
          <th>col4</th>
          <th>col5</th>
        </tr>
      </thead>
      <tbody id="table-body"></tbody>
    </table>
  </div>
</div>

<script>
var json = [{ Message: "abc", name: "Some name", id: 345, col4: 2, col5: 5 },
            { Message: "def", name: "Another name", id: 678, col4: 3, col5: 7 }]; // 加一条测试数据
var $container = $("#container");
var $tbody = $("#table-body");

json.forEach(function(item) {
  var $button = $("<button>" + item.Message + "</button>");
  $container.prepend($button);

  $button.on("click", function() {
    // 1. 创建父行，设置唯一ID和标识类
    var parentRowId = `parent-${item.id}`;
    var $parentRow = $(`<tr id="${parentRowId}" class="parent-row">
                          <td>${item.Message}</td>
                          <td>${item.name}</td>
                          <td>${item.id}</td>
                          <td></td>
                          <td></td>
                        </tr>`);
    
    // 2. 创建子行，设置关联类和父行ID的关联属性，默认隐藏
    var $childRow = $(`<tr class="child-row" data-parent-id="${item.id}">
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>${item.col4}</td>
                        <td>${item.col5}</td>
                      </tr>`);
    
    // 3. 把父行和子行追加到tbody
    $tbody.append($parentRow).append($childRow);

    // 4. 给父行绑定点击事件，切换对应子行的显示/隐藏
    $parentRow.on("click", function() {
      // 通过data属性找到对应的子行
      $(`.child-row[data-parent-id="${item.id}"]`).toggle();
    });
  });
});
</script>

关键实现点说明： #

• 父行标识：用parent-${item.id}作为父行的唯一ID，同时加parent-row类用于样式和选择
• 子行关联：子行加child-row类默认隐藏，通过data-parent-id属性关联对应的父行ID，方便后续查找
• 切换逻辑：给父行绑定click事件，用toggle()方法切换对应子行的显示/隐藏状态，这样点击一次显示，再点击一次隐藏
• 样式优化：给父行加背景色和光标样式，让用户更容易识别这是可点击的行

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