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

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>

请告诉我，如果你的作品！