使用 CSS 网格创建响应式 html 表格并从 JavaScript 收集数据答案

【问题标题】：Creating responsive html table using CSS grid and gathering data from JavaScript使用 CSS 网格创建响应式 html 表格并从 JavaScript 收集数据
【发布时间】：2021-07-03 21:49:59
【问题描述】：

我正在尝试创建某种日志。我的想法是我希望它具有响应性，使用 CSS 网格，同时我想从 JavaScript 将数据添加到日志中。我用 div 做到了，它工作得很好，但是在我试图用 JavaScript 中的新数据复制行的部分，我没有解决方案，所以我使用了表格。这是它现在的样子，但它没有使用完全的 CSS 网格，我需要一个解决方案。

static addFlightToList(flight) {
  const list = document.querySelector("#gridcontainer");
  const row = document.createElement("tr");


  row.className = "grid-container paddingleft";
  row.innerHTML = `
        <td class="grid-item">${flight.nrcrt}</td>
        <td class="grid-item">${flight.pilot}</td>
        <td class="grid-item">${flight.copilot}</td>
        <td class="grid-item">${flight.takeoff}</td>
        <td class="grid-item">${flight.landing}</td>
        <td class="grid-item">${flight.blocktime}</td>
        <td class="grid-item">${flight.type}</td>
        <td class="grid-item">${flight.comment}</td>
        `;

  list.appendChild(row);
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: minmax(25px, auto);
  grid-auto-columns: minmax(12, 5%, auto);
  background-color: #eee;
  height: 20px;
  font-size: medium;
}

<table class="width">
  <thead>
    <tr class="grid-container paddingleft">
      <th class="grid-item">Nr.Crt</th>
      <th class="grid-item">Pilot</th>
      <th class="grid-item">Copilot</th>
      <th class="grid-item">Takeoff</th>
      <th class="grid-item">Landing</th>
      <th class="grid-item">BlockTime</th>
      <th class="grid-item">Type</th>
      <th class="grid-item">Comment</th>
    </tr>
  </thead>
  <tbody id="gridcontainer"></tbody>
</table>

这就是网站的外观（您可以看到列表中重叠的文本）：

如果有人能帮我解决这个问题，我将不胜感激。我愿意以不同的风格来做这件事，但我想继续使用 CSS 网格。

【问题讨论】：

这个问题毫无意义。 CSS-Grid 一开始就是不使用 HTML 表格。如果您打算使用 CSS-Grid，为什么要使用 HTML 表格 amrkup？到目前为止，对我来说，它看起来像表格数据。因此，这样的表将是正确的用途。 CSS-Grid 用于样式化目的，如果您想为表格设置样式而不是如果您想显示表格数据。
我尝试使用 div，但在 javascript 部分，我不知道如何复制它们以创建具有相同属性的新单独行。
就像我说的，你试图显示表格数据。因此，您首先不应该使用 CSS-Grid。您不是尝试在表格中设置不同元素的样式，例如布局，而是尝试在表格中显示数据。因此，首先使用正确的 HTML 表格。使用innerHTML 和++ 向innerHTML 添加更多元素，而不是替换它。
抱歉，我上次评论中的意思是+=

标签： javascript html css css-grid

【解决方案1】：

您有表格数据。因此，您应该忘记 CSS-Grid，它是一种用于样式目的的工具。它用于在类似表格的布局中设置元素的样式，而不是用于创建表格。您应该使用 HTML 表格来显示数据。

您正在苦苦挣扎的事情是向innerHTML 添加更多内容。这是由两个主要问题引起的：

您会覆盖现有的innerHTML，而不是添加更多内容。要添加更多内容，您必须使用.innerHTML += ...。 += 而不仅仅是 = 添加内容而不是替换它。
您的脚本中有换行符。这会导致意外的换行错误。如果您在代码中使用换行符，则必须将该行放在引号中，并在末尾添加 +，如果后面会有更多行：

function addMore() {
  document.querySelector('#gridcontainer').innerHTML += 
    '<td class="grid-item">${flight.nrcrt}</td>' +
    '<td class="grid-item">${flight.pilot}</td>' +
    '<td class="grid-item">${flight.copilot}</td>' +
    '<td class="grid-item">${flight.takeoff}</td>' +
    '<td class="grid-item">${flight.landing}</td>' +
    '<td class="grid-item">${flight.blocktime}</td>' +
    '<td class="grid-item">${flight.type}</td>' +
    '<td class="grid-item">${flight.comment}</td>';
}

<table class="width">
  <thead>
    <tr class="grid-container paddingleft">
      <th class="grid-item">Nr.Crt</th>
      <th class="grid-item">Pilot</th>
      <th class="grid-item">Copilot</th>
      <th class="grid-item">Takeoff</th>
      <th class="grid-item">Landing</th>
      <th class="grid-item">BlockTime</th>
      <th class="grid-item">Type</th>
      <th class="grid-item">Comment</th>
    </tr>
  </thead>
  <tbody id="gridcontainer"></tbody>
</table>

<button onclick="addMore()">Add more entries</button>

【讨论】：