如何修改表格中的内容单元格（无 jquery）

【问题标题】：how to modify a content cell in a table (no jquery)如何修改表格中的内容单元格（无 jquery）
【发布时间】：2022-12-07 22:28:15
【问题描述】：

我有一个包含 2 个单元格的表格，一个包含文本，另一个包含 2 个按钮（编辑和删除），我想出了删除功能。现在，我希望能够通过使第一个单元格变成可编辑输入来编辑 tr，我希望第二个单元格中的 2 个按钮变成一个按钮（保存按钮），这是我的 tr 示例代码：

<tr id="row1">
            <td id="name_row1">Element 1 </td>
            <td>
                <input type="button" id="edit_button1" value="Edit">
                <input type="button" value="Delete" onclick="Delete(this)" >
            </td>
        </tr>

感谢您的帮助，谢谢（我不能仅使用 jquery javascript）

【问题讨论】：

标签： javascript

【解决方案1】：

要在不使用 jQuery 的情况下修改表格中单元格的内容，您可以使用 JavaScript 访问表格中的单元格元素并更改其内部 HTML 或文本内容。这是一个如何做到这一点的例子：

   // Get a reference to the table element
let table = document.getElementById('my-table');

// Get a reference to the cell element you want to modify
let cell = table.rows[0].cells[0];

// Modify the cell's contents by changing its inner HTML or text content
cell.innerHTML = 'New cell content';
// or
cell.textContent = 'New cell content';

在上面的代码中，我们首先使用 getElementById 方法获取对 ID 为 my-table 的表元素的引用。然后，我们使用表格元素的行和单元格属性来访问我们要修改的单元格元素。最后，我们使用单元格元素的 innerHTML 或 textContent 属性来更改其内容。

【讨论】：