时间戳

首页 > 解决方案 > HTML/JS Table-Header 与 Table-Body 不匹配

javascript - HTML/JS Table-Header 与 Table-Body 不匹配

问题描述

我在正确显示表格时遇到了一点问题。表头与表体不一致。表格日期显示在 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",
  });
}

生成的html代码

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

我非常感谢每一个输入！

标签： javascripthtmlhtml-table

解决方案

我知道出了什么问题。我忘了关闭 td-tags。所以对于每个</th>丢失的数据:((很抱歉偷了你的时间，这个简单的问题。干杯

推荐阅读