怎么JS实现表格最后一行有个加一行的按钮，点击按钮增加一行同时原先按钮也会向下一直最后一行

在JavaScript中，你可以使用HTML、CSS和一些基本的DOM操作来实现这个功能。首先，创建一个表格结构，然后在每一行的末尾添加一个“+”按钮。当用户点击这个按钮时，动态地插入新的一行。

以下是一个简单的示例：

1. HTML:

<table id="myTable">
  <tr>
    <td>列1</td>
    <td>列2</td>
    <td><button class="addRow">+</button></td>
  </tr>
</table>
<button id="addButton" style="display:none;">添加更多行</button>

2. CSS:

.addRow {
  cursor: pointer;
}

3. JavaScript (通常放在`<script>`标签内或外部文件):

document.addEventListener('DOMContentLoaded', function() {
  var table = document.getElementById('myTable');
  var addButton = document.getElementById('addButton');

  // 获取最后一行
  var lastRow = table.rows[table.rows.length - 1];

  // 点击添加行按钮的事件处理
  addButton.addEventListener('click', function() {
    var newRow = table.insertRow(-1); // 插入新行到最后一行之后

    // 在新行添加单元格
    for (var i = 0; i < lastRow.cells.length; i++) {
      newRow.insertCell(i).innerHTML = lastRow.cells[i].innerHTML; // 复制内容
    }

    // 隐藏添加按钮，并将焦点移至新增行的第一个单元格
    this.style.display = 'none';
    newRow.cells[0].focus();
  });

  // 表格的最后一行有输入框时显示添加按钮
  table.addEventListener('input', function(e) {
    if (e.target.parentNode.rowIndex === table.rows.length - 1) {
      addButton.style.display = 'inline-block';
    } else {
      addButton.style.display = 'none';
    }
  });
});