数据表添加行 - Javascript

在开发过程中，经常会需要对数据表进行添加行的操作。在Javascript中，添加行可以通过操作DOM元素来实现。

一、使用HTML表格

如果你使用HTML表格来展示数据，那么你可以通过操作表格的tbody元素来添加行，例如：

const tableBody = document.querySelector('#tableBody');
const newRow = tableBody.insertRow();

const cell1 = newRow.insertCell();
cell1.innerHTML = 'value1';

const cell2 = newRow.insertCell();
cell2.innerHTML = 'value2';

// ...

这里我们使用了insertRow方法来在tbody中创建新的行元素，并使用insertCell方法来添加单元格。这里是一个使用HTML表格添加行的示例：

|Column 1|Column 2| |---|---| |Value 1|Value 2| |Value 3|Value 4|

<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody id="tableBody">
    <tr>
      <td>Value 1</td>
      <td>Value 2</td>
    </tr>
    <tr>
      <td>Value 3</td>
      <td>Value 4</td>
    </tr>
  </tbody>
</table>

<script>
  const tableBody = document.querySelector('#tableBody');
  const newRow = tableBody.insertRow();

  const cell1 = newRow.insertCell();
  cell1.innerHTML = 'Value 5';

  const cell2 = newRow.insertCell();
  cell2.innerHTML = 'Value 6';
</script>

这段代码将在表格中添加一行，包含两个单元格：'Value 5'和'Value 6'。

二、使用div元素模拟表格

除了使用HTML表格来展示数据，你还可以使用div元素来模拟表格，例如：

<div class="table">
  <div class="row">
    <div class="cell">Value 1</div>
    <div class="cell">Value 2</div>
  </div>
  <div class="row">
    <div class="cell">Value 3</div>
    <div class="cell">Value 4</div>
  </div>
</div>

<script>
  const table = document.querySelector('.table');
  const newRow = document.createElement('div');
  newRow.classList.add('row');

  const cell1 = document.createElement('div');
  cell1.classList.add('cell');
  cell1.innerText = 'Value 5';

  const cell2 = document.createElement('div');
  cell2.classList.add('cell');
  cell2.innerText = 'Value 6';

  newRow.appendChild(cell1);
  newRow.appendChild(cell2);
  table.appendChild(newRow);
</script>

这里我们使用了createElement方法来创建新的元素，并使用appendChild方法来添加到DOM树中。这里是一个使用div元素模拟表格添加行的示例：

|Column 1|Column 2| |---|---| |Value 1|Value 2| |Value 3|Value 4|

<style>
  .table {
    display: table;
    width: 100%;
  }

  .row {
    display: table-row;
  }

  .cell {
    display: table-cell;
    border: 1px solid #ccc;
    padding: 5px;
  }
</style>

<div class="table">
  <div class="row">
    <div class="cell">Value 1</div>
    <div class="cell">Value 2</div>
  </div>
  <div class="row">
    <div class="cell">Value 3</div>
    <div class="cell">Value 4</div>
  </div>
</div>

<script>
  const table = document.querySelector('.table');
  const newRow = document.createElement('div');
  newRow.classList.add('row');

  const cell1 = document.createElement('div');
  cell1.classList.add('cell');
  cell1.innerText = 'Value 5';

  const cell2 = document.createElement('div');
  cell2.classList.add('cell');
  cell2.innerText = 'Value 6';

  newRow.appendChild(cell1);
  newRow.appendChild(cell2);
  table.appendChild(newRow);
</script>

这段代码将在表格中添加一行，包含两个单元格：'Value 5'和'Value 6'。

以上就是通过Javascript添加数据表行的方法，你可以根据你的实际需求选择使用HTML表格或是使用div元素模拟表格。