js怎么设置tr编辑

如何通过JavaScript实现表格行（tr）的编辑功能

通过JavaScript设置表格行编辑功能的核心步骤包括：为每一行添加编辑按钮、点击按钮时将该行的内容转换为可编辑的表单元素、保存编辑后的内容并更新表格显示。 其中，最关键的一步是使用表单元素替换表格单元格的文本内容。下面详细介绍这一步的实现过程。

一、创建可编辑表格

在开始之前，我们需要一个基本的HTML表格。假设我们有如下的HTML表格：

<table id="myTable">

  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Actions</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>30</td>
    <td><button onclick="editRow(this)">Edit</button></td>
  </tr>
  <tr>
    <td>Jane Smith</td>
    <td>25</td>
    <td><button onclick="editRow(this)">Edit</button></td>
  </tr>
</table>

二、JavaScript实现编辑功能

1. 编辑行的实现

我们需要一个函数来处理编辑按钮的点击事件，将当前行的内容转换为可编辑的表单元素。下面是一个基本的实现：

function editRow(button) {

  // 获取当前行
  var row = button.parentNode.parentNode;
  // 遍历行中的每个单元格
  for (var i = 0; i < row.cells.length - 1; i++) { // 最后一列是按钮，不需要编辑
    var cell = row.cells[i];
    var cellContent = cell.innerHTML;
    // 用输入框替换单元格内容
    cell.innerHTML = '<input type="text" value="' + cellContent + '">';
  }
  // 将按钮文本改为“保存”
  button.textContent = 'Save';
  button.onclick = function() { saveRow(this); };
}

2. 保存行的实现

当用户点击“保存”按钮时，我们需要将输入框的值保存到表格单元格中，并恢复原始的表格显示：

function saveRow(button) {

  // 获取当前行
  var row = button.parentNode.parentNode;
  // 遍历行中的每个单元格
  for (var i = 0; i < row.cells.length - 1; i++) { // 最后一列是按钮，不需要保存
    var cell = row.cells[i];
    var input = cell.firstChild;
    // 将输入框的值替换为文本内容
    cell.innerHTML = input.value;
  }
  // 将按钮文本改为“编辑”
  button.textContent = 'Edit';
  button.onclick = function() { editRow(this); };
}

三、添加和删除行的功能

除了编辑行，我们也可能需要添加和删除行。以下是添加和删除行的实现。

1. 添加行

function addRow() {

  var table = document.getElementById('myTable');
  var newRow = table.insertRow();
  // 添加单元格及其内容
  var cell1 = newRow.insertCell(0);
  var cell2 = newRow.insertCell(1);
  var cell3 = newRow.insertCell(2);
  cell1.innerHTML = '<input type="text" placeholder="Name">';
  cell2.innerHTML = '<input type="number" placeholder="Age">';
  cell3.innerHTML = '<button onclick="saveNewRow(this)">Save</button>';
}
function saveNewRow(button) {
  var row = button.parentNode.parentNode;
  // 遍历行中的每个单元格
  for (var i = 0; i < row.cells.length - 1; i++) { // 最后一列是按钮，不需要保存
    var cell = row.cells[i];
    var input = cell.firstChild;
    // 将输入框的值替换为文本内容
    cell.innerHTML = input.value;
  }
  // 将按钮文本改为“编辑”
  button.textContent = 'Edit';
  button.onclick = function() { editRow(this); };
}

2. 删除行

function deleteRow(button) {

  var row = button.parentNode.parentNode;
  row.parentNode.removeChild(row);
}

在HTML表格中添加“删除”按钮：

<td><button onclick="deleteRow(this)">Delete</button></td>

四、整体示例

结合以上所有功能，最终的HTML和JavaScript代码如下：

<!DOCTYPE html>

<html>
<head>
  <title>Editable Table</title>
</head>
<body>
  <table id="myTable">
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Actions</th>
    </tr>
    <tr>
      <td>John Doe</td>
      <td>30</td>
      <td>
        <button onclick="editRow(this)">Edit</button>
        <button onclick="deleteRow(this)">Delete</button>
      </td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>25</td>
      <td>
        <button onclick="editRow(this)">Edit</button>
        <button onclick="deleteRow(this)">Delete</button>
      </td>
    </tr>
  </table>
  <button onclick="addRow()">Add Row</button>
  <script>
    function editRow(button) {
      var row = button.parentNode.parentNode;
      for (var i = 0; i < row.cells.length - 1; i++) {
        var cell = row.cells[i];
        var cellContent = cell.innerHTML;
        cell.innerHTML = '<input type="text" value="' + cellContent + '">';
      }
      button.textContent = 'Save';
      button.onclick = function() { saveRow(this); };
    }
    function saveRow(button) {
      var row = button.parentNode.parentNode;
      for (var i = 0; i < row.cells.length - 1; i++) {
        var cell = row.cells[i];
        var input = cell.firstChild;
        cell.innerHTML = input.value;
      }
      button.textContent = 'Edit';
      button.onclick = function() { editRow(this); };
    }
    function addRow() {
      var table = document.getElementById('myTable');
      var newRow = table.insertRow();
      var cell1 = newRow.insertCell(0);
      var cell2 = newRow.insertCell(1);
      var cell3 = newRow.insertCell(2);
      cell1.innerHTML = '<input type="text" placeholder="Name">';
      cell2.innerHTML = '<input type="number" placeholder="Age">';
      cell3.innerHTML = '<button onclick="saveNewRow(this)">Save</button>';
    }
    function saveNewRow(button) {
      var row = button.parentNode.parentNode;
      for (var i = 0; i < row.cells.length - 1; i++) {
        var cell = row.cells[i];
        var input = cell.firstChild;
        cell.innerHTML = input.value;
      }
      button.textContent = 'Edit';
      button.onclick = function() { editRow(this); };
    }
    function deleteRow(button) {
      var row = button.parentNode.parentNode;
      row.parentNode.removeChild(row);
    }
  </script>
</body>
</html>

以上代码展示了如何通过JavaScript实现表格行（tr）的编辑功能，以及如何添加和删除表格行。通过这种方式，用户可以动态编辑表格内容，从而提高数据管理的灵活性和可操作性。

相关问答FAQs：

1. 如何使用JavaScript来编辑表格中的特定行（tr）？

您可以使用JavaScript来编辑表格中的特定行（tr）。首先，您需要获取对应的行元素，然后通过修改其属性或内容来进行编辑。以下是一个简单的示例：

// 获取表格中的特定行
var table = document.getElementById("myTable");
var row = table.rows[2]; // 获取第三行（索引从0开始）

// 修改行的属性或内容
row.setAttribute("class", "highlight"); // 设置行的CSS类名为highlight，以突出显示
row.cells[0].innerHTML = "New value"; // 修改第一个单元格的内容为"New value"

2. 如何使用JavaScript来添加新的编辑行（tr）到表格中？

要在表格中添加新的编辑行（tr），您可以使用JavaScript动态创建新的行元素，并将其插入到表格中。以下是一个简单的示例：

// 创建新的行元素
var newRow = document.createElement("tr");

// 创建新的单元格元素并设置内容
var cell1 = document.createElement("td");
cell1.innerHTML = "New value 1";
newRow.appendChild(cell1);

var cell2 = document.createElement("td");
cell2.innerHTML = "New value 2";
newRow.appendChild(cell2);

// 将新的行插入到表格中
var table = document.getElementById("myTable");
table.appendChild(newRow);

3. 如何使用JavaScript删除表格中的特定行（tr）？

要删除表格中的特定行（tr），您可以使用JavaScript来获取对应的行元素，并将其从表格中删除。以下是一个简单的示例：

// 获取表格中的特定行
var table = document.getElementById("myTable");
var row = table.rows[2]; // 获取第三行（索引从0开始）

// 从表格中删除行
table.deleteRow(row.rowIndex);

请注意，以上示例仅为演示目的，并假设您已经有一个具有id为"myTable"的表格。您可以根据实际情况进行调整和修改。