使整个表格可编辑并在单击时保存更改

Question

我正在尝试制作一个可编辑的表格，这样当用户单击“编辑”按钮时，每个表格数据单元格都会放置在用户可以输入和更改信息的输入表单中。用户完成后，他们可以再次单击编辑按钮，这样所有输入字段都会消失，所做的更改会保存并显示在表格上。

我已经做到了，当用户单击单个“编辑”按钮时，每个表格数据单元格中的每个数据都被放置在输入字段中。但是，我很难弄清楚如何删除输入框并显示所有更新的表格单元格。我正在考虑在每个 td 中放置“contenteditable”并将其更改为 true/false 会起作用，但我无法弄清楚。

我正在为此使用本地存储，但我只需要这件事上的帮助。任何帮助将不胜感激。

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

我想为您提供更好的解决方案。您可以将输入字段直接放入表格单元格中，并使用readonly 属性将其设置为可编辑。

代码如下：

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>

请告诉我它是否适合你！