js实现将表格中 tbody 标签内的内容复制一遍并添加到自身

你可以使用 JavaScript 遍历表格的 tbody 标签，然后复制其内容并添加到表格中即可。以下是一个基本的示例代码：

// 获取表格元素
const table = document.querySelector('table');

// 获取表格中的 tbody 元素
const tbody = table.querySelector('tbody');

// 复制 tbody 的内容并添加到表格末尾
const clonedTbody = tbody.cloneNode(true);
table.appendChild(clonedTbody);

这段代码首先获取了表格元素，然后通过 `querySelector` 方法获取该表格中的 tbody 元素。接着，使用 `cloneNode` 方法复制了 tbody 的内容，并将其添加到表格末尾，实现了将 tbody 内容复制一遍并添加到自身的效果。

相关问题

js实现克隆tbody 标签内的内容

你可以使用 `cloneNode()` 方法来克隆 `tbody` 标签内的内容。

首先，获取需要克隆的 `tbody` 元素：

var tableBody = document.getElementById('myTable').getElementsByTagName('tbody')[0];

然后，通过 `cloneNode()` 方法克隆该元素的内容：

var newTableBody = tableBody.cloneNode(true);

这里的 `true` 参数表示深度克隆，即会克隆元素及其子元素的所有属性和事件。

完整代码如下：

var tableBody = document.getElementById('myTable').getElementsByTagName('tbody')[0];
var newTableBody = tableBody.cloneNode(true);

现在，`newTableBody` 变量中存储了克隆出来的 `tbody` 元素及其内容。你可以将它添加到另一个表格中，或者将其替换原来的 `tbody` 元素。

js实现输入内容添加至表格，并实现删除和修改添加的内容

以下是一个简单的实现：

HTML代码：

<input type="text" id="input-name" placeholder="姓名">
<input type="text" id="input-age" placeholder="年龄">
<button id="btn-add">添加</button>

<table id="table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody id="table-body"></tbody>
</table>

JS代码：

// 获取DOM元素
const inputName = document.getElementById('input-name');
const inputAge = document.getElementById('input-age');
const btnAdd = document.getElementById('btn-add');
const tableBody = document.getElementById('table-body');

// 定义数据
let data = [];

// 添加事件监听器
btnAdd.addEventListener('click', () => {
  const name = inputName.value.trim();
  const age = inputAge.value.trim();
  if (name && age) {
    // 添加数据
    data.push({
      name,
      age
    });
    // 清空输入框
    inputName.value = '';
    inputAge.value = '';
    // 更新表格
    renderTable();
  }
});

// 渲染表格
function renderTable() {
  let html = '';
  data.forEach((item, index) => {
    html += `
      <tr>
        <td>${item.name}</td>
        <td>${item.age}</td>
        <td>
          <button class="btn-delete" data-index="${index}">删除</button>
          <button class="btn-edit" data-index="${index}">编辑</button>
        </td>
      </tr>
    `;
  });
  tableBody.innerHTML = html;
  // 添加删除和编辑事件监听器
  const btnDeletes = document.querySelectorAll('.btn-delete');
  btnDeletes.forEach(btn => {
    btn.addEventListener('click', () => {
      const index = btn.getAttribute('data-index');
      data.splice(index, 1);
      renderTable();
    });
  });
  const btnEdits = document.querySelectorAll('.btn-edit');
  btnEdits.forEach(btn => {
    btn.addEventListener('click', () => {
      const index = btn.getAttribute('data-index');
      const item = data[index];
      const newName = prompt('请输入新的姓名', item.name);
      const newAge = prompt('请输入新的年龄', item.age);
      if (newName && newAge) {
        data.splice(index, 1, {
          name: newName,
          age: newAge
        });
        renderTable();
      }
    });
  });
}

实现思路：

1. 定义数据变量 `data`，存放添加的内容，初始值为空数组 `[]`。
2. 获取输入框和按钮的 DOM 元素。
3. 给按钮添加点击事件监听器，当点击按钮时，获取输入框的值，如果值不为空，则将输入的内容添加到 `data` 数组中，并清空输入框；最后调用 `renderTable()` 函数更新表格。
4. 定义 `renderTable()` 函数，用于将 `data` 数组中的内容渲染到表格中。首先定义空字符串 `html`，然后使用 `forEach()` 遍历 `data` 数组，将每个元素的 `name` 和 `age` 属性拼接成一行 HTML 代码，并添加到 `html` 中。最后将 `html` 赋值给表格的 `innerHTML` 属性，更新表格内容。
5. 在 `renderTable()` 函数中，添加删除和编辑按钮的事件监听器。首先使用 `querySelectorAll()` 获取所有的删除和编辑按钮元素，然后使用 `forEach()` 遍历这些元素，给每个按钮添加点击事件监听器。当点击删除按钮时，获取该按钮的 `data-index` 属性，即该按钮对应的数据在 `data` 数组中的下标，然后使用 `splice()` 方法从 `data` 数组中删除该元素，并调用 `renderTable()` 函数更新表格。当点击编辑按钮时，同样获取该按钮的 `data-index` 属性，然后使用 `prompt()` 方法弹出输入框，让用户输入新的姓名和年龄。如果用户输入了新的姓名和年龄，则使用 `splice()` 方法将 `data` 数组中对应元素替换成新的内容，并调用 `renderTable()` 函数更新表格。