adding text-box in column (script)

Question

I have this code (in script):

var response = [{
      "A":"a2",
      "B":"b2",
      "C":"c2"
     },
     {
      "A":"a3",
      "B":"b3",
      "C":"c3"
    },
    {
      "A":"a4",
      "B":"b4",
      "C":"c4"
    }];

    $.each(response, function(i, item) {
                $('<tr>').html(
                //"<tr>" +
                "<td>" + response[i].A + "</td><td>" + response[i].B + "</td><td>" + response[i].C + "</td>" + "</tr>").appendTo('#MyTable tbody');
        });

and I want to change one of column (just for exp it's will be "A") to be "edited" by text-box. I am tring this:

...                `"<td><input type="text">" + response[i].A + "</td><td>" + response[i].B + "</td><td>" + response[i].C + "</td>" + "</tr>").appendTo('#MyTable tbody');`...

but it's not working. any help please!

Answer 1

Try saying This

var firstcell = "<td><input type="text" value="VALUE"</td>";
firstcell = firstcell.replace('VALUE', response[i].A);

Use this for first cell in each Row. After that append this in whole row.

Answer 2

If i understood correctly,

Instead of creating <tr> , later adding contents to it using html() and finally appending to do the <table> , you can directly add everything altogether to the <table> using append() method.

 $.each(response, function(i, item) {
     $('#MyTable tbody').append("<tr>"
          +"<td><input type='text' value='"+ response[i].A +"'/> </td><td><input type='text' value='"+ response[i].B +"'/></td><td><input type='text' value='"+ response[i].C +"'/></td>"
          + "</tr>");
     });