[Solved] how to make input fields editable?

Question

This question is so specific to the OP scenario, so i will try to make the answer a bit more general.

I’m no expert here, but it seems you already capture the user’s input and cloned it when they click Add to a new td. Therefore from what I understood is that you need to edit/delete the data from the new created td.

We have a table that contains several fields. We want to apply the following action on them

1- Add

2- Edit

3- Delete

Maybe this isn’t the best practice, in short, my approach for this was to insert two spans for each data value:

One hidden that contains an input text field (inputSpan).
Another just contains plain text value (dataSpan).

Whenever you want to edit, dataSpan (just a data container) will disappear and inputSpan (text input field) appears instead enabling you to edit the text field. Once you edit and click Save the data in the text field will be cloned to replace the data in dataSpan. So basically dataSpan is just a reflection to inputSpan text field.

Here is an updated demo:

JSFiddle >> FullView Fiddle

I suggest for readability purposes, you break your code down into small function, it will make life easier, just sayin. So here general logic for your idea:

   deleteRow = function (trID) {
        // delete code goes here, remove the row
        $(trID).remove();
    }

manageEdit = function (tdNo) {
    if ($("#edit-btn" + tdNo).html() === "Edit") { 
        $("#save-btn" + tdNo).show();//show save button
        $("#edit-btn" + tdNo).html("Cancel");//change edit to cancle
        editRow(tdNo);//call edit function
    } else if ($("#edit-btn" + tdNo).html() === "Cancel") { 
        $("#save-btn" + tdNo).hide();//hide save button
        $("#edit-btn" + tdNo).html("Edit");//change back edit button to edit
        cancelEditRow(tdNo);
    }
}

editRow = function (tdNo) {
    $(".inputSpan" + tdNo).show();//show text input fields
    $(".dataSpan" + tdNo).hide();//hide data display
}

cancelEditRow = function (tdNo) { 
    //looop thru 3 input fields by id last digit
    for (var i = 0; i < 3; i++) {
        //get input span that contain the text field
        var inputSpan = $("#inputSpan" + tdNo + "-" + i);
        //get the data span that contain the display data
        var dataSpan = $("#dataSpan" + tdNo + "-" + i);
        //text field inside inputSpan
        var textField = inputSpan.find('input:text');
        inputSpan.hide();//hide input span
        textField.val(dataSpan.html());//take original data from display span and put it inside text field to cncle changes. 
        dataSpan.show();//show data span instead of edit field
    }
}

saveRow = function (tdNo) { 
    //same as edit, but we reverse the data selection. 
    for (var i = 0; i < 3; i++) {
        var inputSpan = $("#inputSpan" + tdNo + "-" + i);
        var dataSpan = $("#dataSpan" + tdNo + "-" + i);
        var textField = inputSpan.find('input:text');
        inputSpan.hide();
        dataSpan.html(textField.val());//take data from text field and put into dataSpan
        dataSpan.show();

    }
    $("#edit-btn" + tdNo).html("Edit");//change text to edit
    $("#save-btn" + tdNo).hide();//hide same button. 
}

Here where I add the spans:

     var tdCounter = 0;             
      $(".span4").each(function () { 
           var tid =  val+"-"+tdCounter;  
          $tr.append("<td id='#mytd"+tid+"'>
<span id='inputSpan"+tid+"' class="inputSpan"+val+"" style="display:none">
<input type="text" id='#input"+tid+"' value=""+ $(this).val() + "" /></span>
<span id='dataSpan"+tid+"'  class="dataSpan"+val+"">"+$(this).val()+"</td>");               
          tdCounter++;              
                });

Here I just append the buttons to call the functions, each button works for it’s own row:

   $tr.append("<td><botton id='edit-btn" + val + "' class="btn" onclick=manageEdit('" + val + "');>Edit</botton></td>");
   $tr.append("<td><botton style="display:none" id='save-btn" + val + "' class="btn" onclick=saveRow('" + val + "');>Save</botton></td>");
   $tr.append("<td><botton id='delete-btn" + val + "' class="btn" onclick=deleteRow('" + trID + "');>Delete</botton></td>");

Accepted Answer