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

Question

我正在尝试创建某种日志。我的想法是我希望它能够响应，使用 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 网格。

Answer 1

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

您正在努力的事情是向 innerHTML 添加更多内容。这是由 2 个主要问题引起的：

您覆盖了现有的 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>

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

Creating responsive html table using CSS grid and gathering data from JavaScript

html

javascript

css

css-grid