Make entire table editable and saving the changes on click

Question

I'm trying to make an editable table such that when the user clicks on the 'edit' button, every table data cell get placed inside an input form that the user can type in and change the information. Once the user is done, they may click the edit button again so that all of the input fields go away and the changes made are saved and displayed on the table.

I have made it so that every single data in every table data cell gets placed inside an input field when the user clicks the single 'edit' button. However, I'm having a really rough time trying to figure out how to remove the input boxes and display all the updated table cells. I was thinking of placing "contenteditable" withing every td and changing it to true/false would work, but I couldn't figure it out.

I'm using local storage for this, but I just need help on this one thing. Any help would be greatly appreciated.

var retrieveContacts = localStorage.getItem("contacts");
var newVariable = JSON.parse(retrieveContacts);
var isEdit = 0; // is the table in edit mode? 0- false 1- true 
                                    // set to 0 (false) by default

$.each(newVariable, function(){
    $('#tableStyles').append('<tr>' +
                             '<td id="tableCells" contenteditable="false">' + newVariable[i].email + '</td>' +
                             '<td id="tableCells" contenteditable="false">' + newVariable[i].firstname + '</td>' +
                             '<td id="tableCells" contenteditable="false">' + newVariable[i].lastname + '</td>' +
                             '<td id="tableCells" contenteditable="false">' + newVariable[i].prefix + '</td>' +
                             '<td id="tableCells" contenteditable="false">' + newVariable[i].title + '</td>' +
                             '<td id="tableCells" contenteditable="false">' + newVariable[i].company + '</td>' +
                             '<td id="tableCells" contenteditable="false">' + newVariable[i].phone + '</td>' +
                             '<td id="tableCells" contenteditable="false">' + newVariable[i].fax + '</td>' +
                             '</tr>');
    i++;
});

$('#createCont').click(function(){
    var newRow = "<tr style='height: 35px;'><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>";
    $('#tableStyles').append(newRow);

    newVariable.push({"email": "",
                      "firstname": "",
                      "lastname": "",
                      "prefix": "",
                      "title": "",
                      "company": "",
                      "phone": "",
                      "fax": ""});

   localStorage.setItem("contacts", JSON.stringify(newVariable));
 });


$('#editCont').click(function(){

    if(isEdit == 0){
        var j = 0;
        var trCount = 2; // up to newVariable.length+1
        var tdCount = 1; // up to 8

        for(trCount; trCount < newVariable.length+2; trCount++){
            for(tdCount; tdCount < 9; tdCount++){
                var testing1 = $("tr:nth-child(" + trCount + ")").children("td:nth-child(" + tdCount + ")");

                var testing2 = testing1.html("<input type='text' value='" + testing1.html() + "'/>");
            }
            tdCount = 1;
        }

        trCount = 2;
        tdCount = 1;
        isEdit = 1;

        //console.log("isEdit set to 1");

   } else if(isEdit == 1) { // if the edit button is clicked and we are already editing the form,
                           // then we have take out the input boxes and save all changes.

         for(trCount; trCount < newVariable.length+2; trCount++){
             for(tdCount; tdCount < 9; tdCount++){
                 var testing1 = $("tr:nth-child(" + trCount + ")").children("td:nth-child(" + tdCount + ")");

             }
             tdCount = 1;
         }

         isEdit = 0;
         //console.log("isEdit set to " + isEdit);
     }
});

Answer 1

I would like to offer you a better solution. You can place the input field directly into the table cells and use the readonly attribute to set it editable.

Here is the code:

document.getElementById("edit").addEventListener("click", function() {
  var fields = document.querySelectorAll("table input[type='text']");
  for (var i = 0; i < fields.length; i++) {
    fields[i].readOnly = false;
  }

  document.getElementById("save").style.display = "inline-block";
});

document.getElementById("save").addEventListener("click", function() {
  var data = {};
  data.name = document.getElementById("name").value;
  data.email = document.getElementById("email").value;
  // window.localStorage.formData = JSON.stringify(data);
  // localStorage will not work in this snippet editor
  // uncomment it in your code

  var fields = document.querySelectorAll("table input[type='text']");
  for (var i = 0; i < fields.length; i++) {
    fields[i].readOnly = true;
  }

  document.getElementById("save").style.display = "none";
});

table input[type="text"] {
  /* place any styling here */
}

table input[type="text"]:read-only {
  border: none;
}

#save {
  display: none;
}

<form>
  <table>
    <tr>
      <td>Name:</td>
      <td><input type="text" id="name" value="Some Name" readonly /></td>
    </tr>
    <tr>
      <td>Email:</td>
      <td><input type="text" id="email" value="Email address" readonly /></td>
    </tr>
  </table>
  <input type="button" id="edit" value="Edit" />
  <input type="button" id="save" value="Save" />
</form>

Please, tell me if it works for you!