HTML table row becomes editable text box - html

Question

Building a full stack app which loads a list of songs from an api into a table. How can I make a row's fields editable when the user clicks on the Edit button?
Maybe using a modal would be better?
The API is running on Rails and the table is generated using a template engine Handlebars.

Answer 1

You can do this using JavaScript and uniqueIDs generated most likely from the database.
In the below example, wherever the number "10" is used it is meant to renote the presence of a uniqueID, NOT just as a string 10. AKA, in a working example, is ten would be a uniqueID you have generated from a database, and linked to the code below.
The example:
<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>
This will change your text to an input upon click, but it will not submit the response to the database, as that is not the question you asked, and you have not provided any code, or frameworks you wish to use, or even how you access you database.
This answer is the best I can provide with the information you have supplied, which is an image of a table and the tags, "html" and "html-table"
Working example of the above code, here: http://jsfiddle.net/fo2z1vLa/11/