使用jQuery动态添加表格列无效：无控制台报错但列不显示

嘿，我看了你的代码，问题出在把jQuery DOM对象直接和字符串拼接上啦！你在构建buy_order的时候，用$("<td>")这种方式创建的是jQuery对象，不是HTML字符串，直接和字符串拼接的话，会被转换成[object Object]这种无效内容，最终生成的HTML结构完全错乱，所以表格列自然显示不出来。

我帮你把代码修复了，同时优化了一些细节：

$(function(){
  setInterval(function(){
    $.getJSON("http://localhost:3000/buys/order_book?currency_id=ryu", function(data){
      // 先构建完整的表格结构，保留表头（你之前的empty会把表头也清掉）
      let buyOrderHtml = `
        <thead>
          <tr>
            <th scope="col">Price of buy orders(BTC)</th>
            <th scope="col">Amount of buy orders(<%=@currency_id%>)</th>
          </tr>
        </thead>
        <tbody>
      `;

      for (let i = 0; i < data.length; i++) {
        const width = data[i][1] * 10;
        buyOrderHtml += `
          <tr>
            <td class="table-default">
              <div class="parent">
                <div class="overlay bg-danger" style="width:${width}%"></div>
                ${data[i][0]}
              </div>
            </td>
            <td class="table-default">${data[i][1]}</td>
          </tr>
        `;
      }

      buyOrderHtml += '</tbody>';

      // 替换表格内容并添加淡入效果
      $("#buy_order").hide().html(buyOrderHtml).fadeIn(1000);
    });
  }, 5000);
});

主要修改点说明： #

• 用模板字符串拼接HTML：避免了jQuery对象和字符串混合的问题，代码可读性也更高
• 保留表头结构：之前的empty()会把整个表格内容清空，包括表头，现在直接构建完整的表格结构，确保表头不会丢失
• 简化嵌套结构：去掉了setInterval里多余的$(function(){})嵌套，外层已经是DOM就绪的回调了
• 统一样式类：把你代码里的bg-success改成了预期HTML里的bg-danger，和需求保持一致
• 高效更新内容：用html()直接替换表格内容，比先empty再append更简洁高效

另外还有几个小提醒：

• 确保服务器端已经把<%=@currency_id%>渲染成实际的货币ID，不然表头会显示这个模板字符串
• 检查你的.parent和.overlay CSS样式，比如.parent需要设置position: relative，.overlay设置position: absolute，不然进度条可能不会正确显示
• 确认JSON接口没有跨域问题，如果前端和后端域名不同，需要在后端配置CORS

这样修改后，动态生成的表格列应该就能正常显示啦！

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