HTML表格行成为可编辑文本框

Question

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

也许使用模态会更好？

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

Answer 1

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

在下面的示例中，无论在何处使用数字“ 10”，都表示唯一ID的存在，而不仅仅是字符串10。在一个有效的示例中，AKA为10将是您生成的唯一ID从数据库中，并链接到下面的代码。

示例：

<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/