HTML表格行变成可编辑的文本框答案

【问题标题】：HTML table row becomes editable text boxHTML表格行变成可编辑的文本框
【发布时间】：2023-03-15 21:01:02
【问题描述】：

构建一个完整的堆栈应用程序，将歌曲列表从 api 加载到表格中。当用户单击编辑按钮时，如何使行的字段可编辑？

也许使用模态会更好？

API 在 Rails 上运行，表格是使用模板引擎 Handlebars 生成的。

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/API/HTMLElement/…
可能不止一个遮阳篷。但最常见的是点击事件，您可以在其中切换内容并将其放入输入中。或者您使它们已经输入，但不可编辑，并在单击编辑时将其删除。到目前为止你尝试了什么
不幸的是，没有内置的“使其可编辑并保存回我的数据库”功能。您需要做的是将总体目标分解成小的单独部分，并编写代码来实现其中的每一个。您可以采用多种方法，可以使用多种工具等。就目前而言，这个问题过于广泛，无法在此处进行有意义的回答。从整体拼图的任何部分开始，并进行一些尝试。当您这样做时，如果您遇到特定的技术问题，那么我们可以提供帮助。

标签： html html-table

【解决方案1】：

您可以使用最有可能从数据库生成的 JavaScript 和 uniqueID 来执行此操作。

在下面的示例中，无论在何处使用数字“10”，它都表示存在 uniqueID，而不仅仅是字符串 10。AKA，在一个工作示例中，是 10 将是您生成的 uniqueID来自数据库，并链接到下面的代码。

例子：

<table>
<thead>
<th>Song Name</th>
<th>Artist</th>
<th>Genre</th>
<th colspan="2">Actions</th>
</thead>
<tbody>
//Whatever code here should be written in something like PHP which can 
return multiple values of the example I've written.
<tr id="tr_10">
<td id="songName_10">Nightcall</td>
<td id="songArtist_10">Kavinsky</td>
<td id="songGenre_10">Synthwave</td>
<td><button onclick="editSongInfo(10)">Edit</button></td>
<td><button>Remove</button></td>
</tr>
</tbody>

<script>
function editSongInfo(uniqueId){
var x = document.getElementById("songName_" + uniqueId);
x.innerHTML = "<input type='text' placeholder='Enter edited song name 
here.'>";
x = document.getElementById("songArtist_" + uniqueId);
x.innerHTML = "<input type='text' placeholder='Enter edited song artist 
here.'>";
x = document.getElementById("songGenre_" + uniqueId);
x.innerHTML = "<input type='text' placeholder='Enter edited song genre 
here.'>";
}
</script>

这将在单击时将您的文本更改为输入，但它不会将响应提交到数据库，因为这不是您提出的问题，并且您没有提供任何代码或您希望使用的框架，或者甚至你如何访问你的数据库。

这个答案是我能提供的最好的答案，你提供的信息是一张表格的图像和标签，“html”和“html-table”

上述代码的工作示例，这里：http://jsfiddle.net/fo2z1vLa/11/

【讨论】：