如何修复Bootstrap模态框内表格仅显示单行数据的问题？

核心问题 #

你的代码只显示一行数据，是因为循环里每次都用string = ...直接覆盖了之前拼接好的内容，最后只会保留循环最后一次迭代生成的那一行。另外表头的<tr>标签闭合错误，写成了<tr>而不是</tr>，这会导致HTML结构异常。

修复后的代码 #

function setHistory(info){
  
  document.getElementById("view_info_table").innerHTML = "";
  $(".view_info").removeClass("hide");
  if(info == undefined || info == null){
    return;
  }
  
  let string = "";
  if(info.length > 0){
    // 修复表头的闭合标签
    string = "<tr>" +
                "<th>Meeting Subject</th>" +
                "<th>Meeting ID</th>" +
              "</tr>";
    $("#view_info_table").removeClass("hide");
  } else {
    $('#view_info_table').addClass("hide");
  }
  // 循环中用 += 累加内容，而不是覆盖
  for(let i = 0; i < info.length; i++){
    string += "<tr>" +
                "<td>" + info[i]['meetingsubject'] + "</td>" +
                "<td>" + info[i]['meetingid'] + "</td>" +
              "</tr>";
  }
  document.getElementById("view_info_table").innerHTML = string;
}

关键修改点 #

• 将循环内的string =改为string +=，这样每次迭代都会把新行的HTML追加到已有字符串后面，而不是替换掉之前的内容
• 修正表头行的闭合标签：把<tr>改成</tr>，保证HTML结构合法，避免浏览器解析异常

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