带有可编辑单元格的新 htm 表格行

Question

我正在创建一个仅以标题行开头的 html 表，并且用户有一个添加新行按钮，可将行添加到表中。 我设法让它工作，但我需要用户可以编辑新行。 我尝试使用 contenteditable=“true”，但只有在 html 文件中已经创建了行时才能这样做。 如何使创建新单元格的 javascript 函数包含 contenteditable 属性？

Answer 1

您可以在创建元素之后和实际将其添加到 DOM 之前设置元素的属性。

 const getCellEditable = () => { const cell = document.createElement("td") cell.setAttribute("contenteditable", true) return cell } const getRow = () => { const row = document.createElement("tr") row.append(getCellEditable()) row.append(getCellEditable()) return row } const tbody = document.getElementById("tbody") const btnAddRow = document.getElementById("add-row") const addRow = (parent) => { parent.append(getRow()) } btnAddRow.addEventListener("click", function() { addRow(tbody) })

 tr, th, td { border: 1px solid black; } #table { border-collapse: collapse; } th, td { padding: 8px 16px; }

 <button id="add-row">ADD ROW +</button> <br /> <br /> <table id="table"> <thead> <tr> <th> First </th> <th> Second </th> </tr> </thead> <tbody id="tbody"> </tbody> </table>