Question

我有一个像这样的表：
我想知道如何使表主体适合列和行的这些标题之间。当前，在将新的行和表数据插入表主体时，它会插入到总数下方。

当使用javascript插入新行/数据时，我希望将其插入到列标题和行标题所留的空间中。在“差距”中。

*{
  padding: 0;
  margin: 0;
  font-family: "Trebuchet MS", Times, serif;
  box-sizing:border-box;
}
html{
  background-color: #35454E;
  overflow: hidden;
}
html *{
  font-family: "Work Sans", Arial, sans-serif !important;
  color: white !important;
}
table{
  border-collapse: collapse;
  border-spacing: 0px;
}
table, th, td{
  padding: 5px;
  border: 2px solid white;
}

<html>
<head>
  <link rel="stylesheet" type="text/css" href="MMS.css">
  <title>Money Management</title>
</head>
<body>
  <table id="mainTable">
    <thead>
      <tr>
        <th>2019</th>
        <th colspan="5">January</th>
      </tr>
      <tr>
        <th>Weeks</th>
        <th>31/12/2018</th>
        <th>07/01/2019</th>
        <th>14/01/2019</th>
        <th>21/01/2019</th>
        <th>28/01/2019</th>
      </tr>
      <tr>
        <th>Balance</th>
      </tr>
      <tr>
        <th>Pay</th>
      </tr>
      <tr>
        <th>&nbsp</th>
      </tr>
      <tr>
        <th>Rent</th>
      </tr>
      <tr>
        <th>Food</th>
      </tr>
      <tr>
        <th>&nbsp</th>
      </tr>
      <tr>
        <th>Total</th>
      </tr>
    </thead>
    <tbody>

    </tbody>
  </table>
</body>
<script src="MMS.js"></script>
</html>

'use strict'
let table = document.getElementById("mainTable")
let cell1 = table.getElementsByTagName("tbody")[0].insertRow(0).insertCell(0)
cell1.innerHTML = "hello world"

https://jsfiddle.net/wmrb4p5x/1/

Answer 1

您可以仅将<th>行中的<tbody>标题单元格作为第一个单元格。 <th>不仅限于<thead>个节点。

      <tr>
        <th>Balance</th>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
      </tr>

赞：

*{
  padding: 0;
  margin: 0;
  font-family: "Trebuchet MS", Times, serif;
  box-sizing:border-box;
}
html{
  background-color: #35454E;
  overflow: hidden;
}
html *{
  font-family: "Work Sans", Arial, sans-serif !important;
  color: white !important;
}
table{
  border-collapse: collapse;
  border-spacing: 0px;
}
table, th, td{
  padding: 5px;
  border: 2px solid white;
}

<html>
<head>
  <link rel="stylesheet" type="text/css" href="MMS.css">
  <title>Money Management</title>
</head>
<body>
  <table id="mainTable">
    <thead>
      <tr>
        <th>2019</th>
        <th colspan="5">January</th>
      </tr>
      <tr>
        <th>Weeks</th>
        <th>31/12/2018</th>
        <th>07/01/2019</th>
        <th>14/01/2019</th>
        <th>21/01/2019</th>
        <th>28/01/2019</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Balance</th>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
      </tr>
      <tr>
        <th>Pay</th>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
      </tr>
      <tr>
        <th>&nbsp</th>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
      </tr>
      <tr>
        <th>Rent</th>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
      </tr>
      <tr>
        <th>Food</th>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
      </tr>
      <tr>
        <th>&nbsp</th>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
      </tr>
      <tr>
        <th>Total</th>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
      </tr>
    </tbody>
  </table>
</body>
<script src="MMS.js"></script>
</html>

Answer 2

考虑将数据行移动到<tbody>，然后遍历它们，并为每列添加一个单元格，而不是添加行，如下所示：

let table = document.getElementById("mainTable");
let rows = table.querySelectorAll("tbody tr");
rows.forEach(row => {
  row.insertCell(1).innerHTML = "5"; //28/01/2019
  row.insertCell(1).innerHTML = "4"; //21/01/2019
  row.insertCell(1).innerHTML = "3"; //14/01/2019
  row.insertCell(1).innerHTML = "2"; //07/01/2019
  row.insertCell(1).innerHTML = "1"; //31/12/2018
});

* {
  padding: 0;
  margin: 0;
  font-family: "Trebuchet MS", Times, serif;
  box-sizing: border-box;
}

html {
  background-color: #35454E;
  overflow: hidden;
}

html * {
  font-family: "Work Sans", Arial, sans-serif !important;
  color: white !important;
}

table {
  border-collapse: collapse;
  border-spacing: 0px;
}

table,
th,
td {
  padding: 5px;
  border: 2px solid white;
}

<html>

<head>
  <link rel="stylesheet" type="text/css" href="MMS.css">
  <title>Money Management</title>
</head>

<body>
  <table id="mainTable">
    <thead>
      <tr>
        <th>2019</th>
        <th colspan="5">January</th>
      </tr>
      <tr>
        <th>Weeks</th>
        <th>31/12/2018</th>
        <th>07/01/2019</th>
        <th>14/01/2019</th>
        <th>21/01/2019</th>
        <th>28/01/2019</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Balance</th>
      </tr>
      <tr>
        <th>Pay</th>
      </tr>
      <tr>
        <th>&nbsp</th>
      </tr>
      <tr>
        <th>Rent</th>
      </tr>
      <tr>
        <th>Food</th>
      </tr>
      <tr>
        <th>&nbsp</th>
      </tr>
      <tr>
        <th>Total</th>
      </tr>

    </tbody>
  </table>
</body>
<script src="MMS.js"></script>

</html>

如何放置表格主体以“适合”表格标题和行标题？

2 个答案: