如何用HTML、JavaScript或Bootstrap实现表格动态按需下拉行？

当然可以实现！而且结合Twitter Bootstrap的Collapse组件来做会非常省心，完全不需要纠结给元素分配唯一ID的问题——我们可以用相对DOM关系或者动态关联属性来搞定动态表格的展开/收起功能。

核心思路：利用Bootstrap Collapse + 相对选择器 #

Bootstrap的Collapse组件本身就支持通过JavaScript触发状态切换，配合jQuery的相对DOM选择器（比如next()、find()），我们完全不需要依赖唯一ID来定位展开内容——毕竟动态生成的元素手动加ID太麻烦了。

具体代码实现（修改你的buildHtmlTable函数） #

假设你原来的函数是循环生成表格行，我们只需要在生成每行的时候，额外添加一个隐藏的“展开行”，再给主行绑定点击事件即可：

function buildHtmlTable(portalData, tablename) {
  var columns = []; // 保留你原来获取列的逻辑
  var table$ = $('<table class="table table-hover"></table>').attr('id', tablename);
  var headerTr$ = $('<tr></tr>');
  
  // 构建表头（保留你原来的逻辑）
  columns.forEach(function(col) {
    headerTr$.append($('<th></th>').text(col));
  });
  table$.append($('<thead></thead>').append(headerTr$));
  
  var tbody$ = $('<tbody></tbody>');
  portalData.forEach(function(rowData) {
    // 1. 创建可点击的主行
    var mainTr$ = $('<tr class="clickable-row"></tr>');
    // 填充主行单元格（保留你原来的逻辑）
    columns.forEach(function(col) {
      mainTr$.append($('<td></td>').text(rowData[col]));
    });
    
    // 2. 创建展开行（默认隐藏）
    var expandTr$ = $('<tr class="expand-row"></tr>');
    // 展开单元格跨所有列
    var expandTd$ = $('<td colspan="' + columns.length + '"></td>');
    // 这里是展开的内容，可以根据rowData动态生成任意HTML
    var expandContent$ = $('<div class="collapse p-3 bg-light"></div>').html(`
      <h6>行详情</h6>
      <p>数据ID: ${rowData.id || '无'}</p>
      <p>额外信息: ${rowData.extraInfo || '暂无'}</p>
    `);
    
    expandTd$.append(expandContent$);
    expandTr$.append(expandTd$);
    
    // 3. 给主行绑定点击事件，切换展开内容的显示状态
    mainTr$.on('click', function() {
      // 通过相对选择器找到当前行后面的展开行里的折叠内容
      $(this).next('.expand-row').find('.collapse').collapse('toggle');
      // 可选：给点击的行添加高亮效果
      $(this).toggleClass('table-active');
    });
    
    // 4. 将主行和展开行加入tbody
    tbody$.append(mainTr$).append(expandTr$);
  });
  
  table$.append(tbody$);
  // 把表格插入到页面的容器中（比如#table-container）
  $('#table-container').append(table$);
}

额外优化：添加点击行的样式提示 #

给可点击的行加个鼠标指针样式，让用户知道这行可以点击：

.clickable-row {
  cursor: pointer;
  transition: background-color 0.2s;
}
.clickable-row:hover {
  background-color: #f8f9fa;
}

适配动态追加行的场景 #

如果你的表格后续会动态追加行（不是一次性生成），可以把点击事件改成事件委托的形式，避免重复绑定：

// 把原来的mainTr$.on('click', ...)替换成下面的代码，放在函数外面或者页面初始化的时候
$(document).on('click', '.clickable-row', function() {
  $(this).next('.expand-row').find('.collapse').collapse('toggle');
  $(this).toggleClass('table-active');
});

这样不管什么时候新增行，点击事件都会生效，不需要重新绑定。

这种方式的好处就是完全不需要给元素分配唯一ID，所有定位都是通过DOM元素的相对关系来实现的，完美适配动态生成的表格场景～

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