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属性将其设置为可编辑。

以下是代码：

＆＃13;

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";
});

＆＃13;

table input[type="text"] {
  /* place any styling here */
}

table input[type="text"]:read-only {
  border: none;
}

#save {
  display: none;
}

＆＃13;

<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>

＆＃13;

请告诉我它是否适合您！

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

1 个答案: