Kamal Singh Kamal Singh - 2 months ago 6
HTML Question

I need to write a variable's value(which will hold the value present in table td) to the textbox dynamically using edit button in jquery

I have the following code/function in jquery to create a table row dynamically,which will contain the button edit in td of the table tr and it is to be used to intitate a function onclick which will pass its row's values to the form fields which i have created.

function addRow() {
debugger;
var table = $('#basicTable');
var row = $('<tr></tr>').appendTo(table);
$('<td></td>').text($('#txt1').val()).appendTo(row);
$('<td></td>').text($('#txt2').val()).appendTo(row);
$('<td></td>').text($('#txt3').val()).appendTo(row);
$('<td><input type="button" id="btnedit" value="Edit" /></td>').appendTo(row);
$('<td><input type="button" id="btndel" value="Delete" class="rem" /></td>').appendTo(row);
$("#form").trigger('reset');

return table;
}


while below is the jquery code which gets called when the click event is initiated for the edit button:

$("#btnedit").click(function () {
debugger;
var par = $(this).parent().parent();
var tdName = par.children("td:nth-child(1)");
var tdEmail = par.children("td:nth-child(2)");
var tdPhone = par.children("td:nth-child(3)");
$("#txt1").val(tdName).html();

$("#txt2").val(tdEmail);
$("#txt3").val(tdPhone);


});


But when i run the code using debugger and check for the value contained in the varaible tdName it shows like this:
[<td>Kamal Singh</td>]
and in the textbox it shows like [object,object],also i need one of the textbox to be focused so as to update the details.

Answer

You are directly binding object to text box. You have to bind HTML. Please find the below link, it will be helpful to you.
https://jsfiddle.net/9ah90pzu/

 [1]: https://jsfiddle.net/9ah90pzu/