当前位置：首页 > JavaScript

js怎么实现增行

2026-04-04 17:54:24JavaScript

使用 JavaScript 动态增行

在表格中动态增加行可以通过操作 DOM 实现。以下是几种常见方法：

方法一：使用 `insertRow()` 和 `insertCell()`

通过表格的 insertRow() 方法在指定位置插入新行，再使用 insertCell() 插入单元格：

function addRow() {
  const table = document.getElementById("myTable");
  const newRow = table.insertRow(-1); // -1 表示在末尾插入

  const cell1 = newRow.insertCell(0);
  const cell2 = newRow.insertCell(1);

  cell1.innerHTML = "新行单元格1";
  cell2.innerHTML = "新行单元格2";
}

方法二：拼接 HTML 字符串

通过拼接 HTML 字符串并插入到表格中：

js怎么实现增行

function addRow() {
  const table = document.getElementById("myTable");
  const newRowHtml = `
    <tr>
      <td>新行单元格1</td>
      <td>新行单元格2</td>
    </tr>
  `;
  table.insertAdjacentHTML('beforeend', newRowHtml);
}

方法三：使用模板引擎

对于复杂场景可以使用模板引擎如 Handlebars：

const source = document.getElementById("row-template").innerHTML;
const template = Handlebars.compile(source);

function addRow(data) {
  const html = template(data);
  document.getElementById("myTable").insertAdjacentHTML('beforeend', html);
}

使用 jQuery 增行

如果项目中使用 jQuery，可以简化操作：

js怎么实现增行

$("#addRowBtn").click(function() {
  $("#myTable").append(`
    <tr>
      <td>新行单元格1</td>
      <td>新行单元格2</td>
    </tr>
  `);
});

动态绑定事件

新增行后需要绑定事件时，推荐事件委托：

document.getElementById("myTable").addEventListener("click", function(e) {
  if(e.target.classList.contains("delete-btn")) {
    e.target.closest("tr").remove();
  }
});

表单输入型增行

对于需要输入数据的行，可以创建表单元素：

function addInputRow() {
  const table = document.getElementById("myTable");
  const newRow = table.insertRow(-1);

  const cell1 = newRow.insertCell(0);
  const cell2 = newRow.insertCell(1);

  cell1.innerHTML = '<input type="text" class="form-control">';
  cell2.innerHTML = '<button class="save-btn">保存</button>';
}

性能优化建议

当需要批量添加大量行时，使用文档片段(documentFragment)：

function addMultipleRows(data) {
  const fragment = document.createDocumentFragment();

  data.forEach(item => {
    const row = document.createElement("tr");
    row.innerHTML = `
      <td>${item.name}</td>
      <td>${item.value}</td>
    `;
    fragment.appendChild(row);
  });

  document.getElementById("myTable").appendChild(fragment);
}

标签: js