JavaScript表格添加行实现：点击+加号按钮新增行的方法

嘿，这个需求很容易搞定，我给你一个纯前端的轻量解决方案，用HTML+JavaScript就能实现，不需要依赖任何框架，代码简单易懂，直接套用就能用：

1. 先搭基础的HTML结构 #

首先我们把表格和按钮的布局写好，给表格加个id方便后续JS定位，按钮绑定点击事件：

<style>
  /* 简单美化下界面，看着舒服点 */
  table {
    border-collapse: collapse;
    margin: 10px 0;
  }
  td {
    border: 1px solid #ccc;
    padding: 8px 12px;
  }
  #addRowBtn {
    padding: 6px 12px;
    cursor: pointer;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
  }
</style>

<table id="myTable">
  <tbody>
    <!-- 初始的2行2列内容 -->
    <tr>
      <td>行1列1</td>
      <td>行1列2</td>
    </tr>
    <tr>
      <td>行2列1</td>
      <td>行2列2</td>
    </tr>
  </tbody>
</table>

<button id="addRowBtn">+ 添加新行</button>

2. 写核心的JavaScript逻辑 #

接下来实现点击按钮动态添加行的功能，逻辑很直白：

// 获取表格和按钮元素
const table = document.getElementById('myTable');
const addRowBtn = document.getElementById('addRowBtn');

// 给按钮绑定点击事件
addRowBtn.addEventListener('click', function() {
  // 优先获取表格的tbody（标准表格结构里行都放在tbody里，即使你没写浏览器也会自动生成）
  const tbody = table.querySelector('tbody') || table;
  
  // 创建新行
  const newRow = document.createElement('tr');
  
  // 创建两个单元格（对应你的2列表格）
  const cell1 = document.createElement('td');
  const cell2 = document.createElement('td');
  
  // 设置单元格内容（你可以改成空字符串让用户输入，或者自定义默认内容）
  cell1.textContent = `行${tbody.children.length + 1}列1`;
  cell2.textContent = `行${tbody.children.length + 1}列2`;
  
  // 把单元格加到新行，再把新行加到tbody里
  newRow.appendChild(cell1);
  newRow.appendChild(cell2);
  tbody.appendChild(newRow);
});

3. 小细节说明 #

• 为什么操作tbody？因为如果后续给表格加表头（<thead>），直接操作tbody不会影响表头，结构更规范。
• 如果你的表格列数变了，只需要调整创建单元格的数量就行，比如要3列就多创建一个<td>。
• 单元格内容可以自由修改，比如换成<input>输入框，让用户直接编辑内容。

这样点击加号按钮，就会自动在表格末尾添加一行新的2列表格啦~

内容的提问来源于stack exchange，提问作者Mahesh