js无刷新操作table的行和列

1. 操作table的行

要实现js无刷新操作table的行，我们可以通过以下方式：

• 找到对应的<tr>元素，使用DOM API进行操作
• 或者通过ajax向后端发送请求，返回表格的新数据，再用js更新表格的内容

以下是一个示例代码，实现通过点击按钮删除特定的一行：

<table>
  <tr>
    <td>行1-列1</td>
    <td>行1-列2</td>
    <td><button onclick="deleteRow(1)">删除</button></td>
  </tr>
  <tr>
    <td>行2-列1</td>
    <td>行2-列2</td>
    <td><button onclick="deleteRow(2)">删除</button></td>
  </tr>
</table>

<script>
function deleteRow(index) {
  var table = document.querySelector('table'); // 找到表格
  var row = table.querySelector('tr:nth-child(' + index + ')'); // 找到特定的一行
  row.remove(); // 删除该行
}
</script>

在这个示例中，我们通过document.querySelector()和querySelectorAll()找到特定的<tr>元素，然后使用该元素的remove()方法将该行删除。

1. 操作table的列

要实现js无刷新操作table的列，我们可以通过以下方式：

• 找到对应的<td>元素，使用DOM API进行操作
• 遍历table的每一行，将特定的一列删除或修改，再更新整个table

以下是一个示例代码，实现通过点击按钮修改特定的一列：

<table>
  <tr>
    <td>行1-列1</td>
    <td>行1-列2</td>
    <td><button onclick="editCol(2)">修改</button></td>
  </tr>
  <tr>
    <td>行2-列1</td>
    <td>行2-列2</td>
    <td><button onclick="editCol(2)">修改</button></td>
  </tr>
</table>

<script>
function editCol(index) {
  var table = document.querySelector('table'); // 找到表格
  var cells = table.querySelectorAll('td:nth-child(' + index + ')'); // 找到特定的一列
  cells.forEach(function(cell) { // 遍历每个单元格
    cell.textContent = '修改后的内容';
  });
}
</script>

在这个示例中，我们通过document.querySelectorAll()找到特定的列，再遍历该列的每个单元格，将其内容修改为新的内容。当然，在实际情况中，你也可以通过ajax向后端发送请求，返回表格的新数据，再用js更新表格的内容。