Это можно сделать с помощью JavaScript и уникальных идентификаторов, сгенерированных наиболее вероятно из базы данных.
В приведенном ниже примере, где бы ни использовалось число «10», оно должно обозначать наличие уникального идентификатора, а не просто строки 10. АКА, в рабочем примере, это десять, будет сгенерированным уникальным идентификатором, который вы сгенерировали из базы данных и связан с кодом ниже.
Пример:
<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/