Dynamic edit rows in the table with AJAX - html

Question

I have table with empty body:
<table id="tablem" border="1" width="100">
<thead>
<tr>
<th style="width: 10%">PageName</th>
<th style="width: 5%">Lang</th>
<th style="width: 10%">ControlName</th>
<th style="width: 70%">ControlValue</th>
<th style="width: 5%">Edit</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
I fill body by AJAX-request, which gets data from the database, and this Ajax-function construct table's body with data:
function ForSearching(args, callback) {
$.ajax({
url: "/source_pages/SearchForMultilang.ashx",
type: "POST",
dataType: "json",
data: args,
}).success(function(data) {
var table = $("#tablem tbody");
$("#tablem tbody").empty();
callback(data);
$.each(data, function (idx, elem) {
table.append('<tr><td>' + elem.PageName + '</td><td>' + elem.Lang + '</td><td>' + elem.ControlName + '</td><td>' + elem.ControlValue + '</td><td><input type="button" id="btnedt" value="Edit" /></td></tr>');
});
});
}
The table is created, filled by data, and in the last column Ajax creates Edit-button.
When you click this button, textfield in every column in row must transform to input type=text with value from cell, so I can change value and after all save this changes in the selected row. And all this must work by ajax.
How to do this?

Answer 1

I recommend to put this code witch changed selector in click handler of this button
$('td').each(function(){
$(this).html($('<input>',{type:'text', value: $(this).html()}));
});
https://jsfiddle.net/urp83mtq/1/
EDIT: I just saw that you want have one button per row
$(':button').each(function(){
$(this).on('click',function(){
$(this).parent().parent().children().each(function(){
if($(this).children().length==0)
$(this).html($('<input>',{type:'text', value: $(this).html()}));
});
});
});
https://jsfiddle.net/urp83mtq/2/