HTML/JS Table-Header 与 Table-Body 不匹配答案

【问题标题】：HTML/JS Table-Header does not match up to Table-BodyHTML/JS Table-Header 与 Table-Body 不匹配
【发布时间】：2021-05-24 23:44:17
【问题描述】：

我在正确显示表格时遇到了一点问题。表头与表体不一致。表格日期显示在 1/3/5/7 列中，因此奇数列被跳过，不知道为什么会发生这种情况。

在以下链接中，您可以查看表格的显示方式。

相关代码：

HTML 代码：

<div id="accreqlist" hidden="true">
      <h1>Accountanfragen Liste</h1>
      <button class="btn btn-secondary btn-lm" id="accreqreturnbtn">zurück</button>
        <form id="accreqlist_form">
          <div id=accreq_message class="form__message form__message--error"></div>
         </form>
   <table class="tablelist" id="tblAccList">
      <thead>
       <tr>
          <th>Accountanfrage ID</th>
          <th>Name</th>
          <th>E-Mail</th>
          <th>Mobile</th>
          <th>Action 1</th>
          <th>Action 2</th>
       </tr>
      </thead>
   <tbody>
  <!--will get filled through js file-->
   </tbody>
   </table>
  </div>

JS-代码：

function accountRequestlistclicked() {
  $.getJSON("/api/accountRequests").done(handleAccountRequestlistReply);
}

function handleAccountRequestlistReply(reqs) {
  $("#tblAccList tbody").empty();

  for (let req of reqs) {
    addReqToList(req);
  }
}

function addReqToList(req) {
  let id = req["accountRequestId"];

  var newRow = "<tr>";
  newRow += "<td>" + req["accountRequestId"] + "<td>";
  newRow += "<td>" + req["accountRequestName"] + "<td>";
  newRow += "<td>" + req["accountRequestEmail"] + "<td>";
  newRow += "<td>" + req["accountRequestMobile"] + "<td>";
  newRow +=
    "<td> <button id = 'u" +
    req["accountRequestId"] +
    "' onClick='deleteAccRequest(" +
    req["accountRequestId"] +
    ")'> Delete </button> </td>";
  newRow +=
    "<td> <button id = 'u" +
    req["accountRequestId"] +
    "' onClick='createUser(" +
    req["accountRequestId"] +
    ")'> Account erstellen </button> </td>";
  newRow += "</tr>";

  $("#tblAccList tbody").append(newRow);
}

//accreq löschen
function deleteAccRequest(id) {
  var urlstring = "/api/deleteAccountRequest/" + id;
  $.ajax({
    type: "DELETE",
    url: urlstring,
    success: deleteReqRespons,
    dataType: "json",
    contentType: "application/json",
  });
}
//user erstellen
function createUser(id) {
  var urlstring = "api/createUser/" + id;
  $.ajax({
    type: "Post",
    url: urlstring,
    success: createUserResponse,
    dataType: "json",
    contentType: "application/jsin",
  });
}

有人知道我可以如何修复表格，以便正确显示列吗？

我非常感谢每一个输入！

【问题讨论】：

看看使用 Bootstrap 来设置表格样式 - getbootstrap.com/docs/4.0/content/tables
可以看一下生成表的html吗？您最终可能会在生成的代码中得到一些无效的标记，所以从那里开始调试
好的，我已将其添加到帖子中...

标签： javascript html html-table

【解决方案1】：

我知道出了什么问题。我忘了关闭 td-tags。因此，对于每个数据，</th> 都丢失了 :(( 抱歉，这个简单的问题占用了您的时间。干杯

【讨论】：