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

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

我已经这样做了，当用户单击单个“编辑”按钮时，每个表数据单元中的每个数据都被放置在输入字段中。然而，我在试图找出如何删除输入框并显示所有更新的表格单元格时遇到了一段非常困难的时间。我想在每个

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

var retrieveContacts=localStorage.getItem（“联系人”）；
var newVariable=JSON.parse（retrieveContacts）；
var isEdit=0；//表格是否处于编辑模式？0-错误1-正确
//默认设置为0（false）
$.each（新变量，函数（）{
$（“#表样式”）.append（“”+
''+newVariable[i].电子邮件+''+
''+newVariable[i].firstname+''+
''+newVariable[i].lastname+''+
''+newVariable[i].前缀+''+
''+newVariable[i].标题+''+
''+newVariable[i].公司+''+
''+newVariable[i].电话+''+
''+newVariable[i].传真+''+
'');
i++；
});
$（'#createCont'）。单击（函数（）{
var newRow=“”；
$（“#表样式”）.append（newRow）；
newVariable.push（{“email”：“”，
“名”：“名”，
“姓氏”：“，
“前缀”：“，
“名称”：“名称”，
“公司”：“，
“电话”：“，
“传真”：“}”；
setItem（“contacts”，JSON.stringify（newVariable））；
});
$（'#editCont'）。单击（函数（）{
如果（isEdit==0）{
var j=0；
var trCount=2；//最多为newVariable.length+1
var tdCount=1；//最多8个
for（trCount；trCount

我想为您提供更好的解决方案。您可以将输入字段直接放入表格单元格，并使用

readonly

属性将其设置为可编辑

代码如下：

document.getElementById（“编辑”）.addEventListener（“单击”，函数）（）{
var fields=document.queryselectoral（“表输入[type='text']”）；
对于（变量i=0；i
表格输入[type=“text”]{
/*在这里放置任何样式*/
}
表输入[type=“text”]：只读{
边界：无；
}
#拯救{
显示：无；
}

姓名：
电邮：
与您的问题无关，但是
id=“tableCells”
id需要是唯一的-您也从来没有将contenteditable设置为“true”，所以，不确定您为什么认为您可以编辑任何内容我的错误，这是一个粗糙的代码，我没有将其完全润色。tablecells应该是一个类。