javascript - 单击时将 contentEditable 保存到 localStorage

Question

我创建了一个包含对象数组内容的表。

//starts table
    let myTable = "<table class=\"fl-table\"><tr><th>Name</th><th>Power</th><th>From</th><th>Action</th></tr>";
    //loops through data
    for(var i=0; i<data.length; i++){
        //adds new row, starts first column
        myTable += "<tr><td contentEditable>";
        //adds name
        myTable += data[i].name;
        //closes first column, adds second
        myTable += "</td><td contentEditable>";
        //adds power
        myTable += data[i].power;
        //closes second column, adds third
        myTable += "</td><td contentEditable>";
        //adds fromCanon
        myTable += data[i].fromCanon;
        //closes third column, adds fourth
        myTable += "</td><td>";
        //adds deletion button
        myTable += "<button class=\"deleteRowBtn\" onclick='deleteRow(";
        myTable += i;
        myTable += ")'>Delete</button>"
        //adds modify button
        myTable += "<button class=\"editRowBtn\" onclick='editRow(";
        myTable += i;
        myTable += ")'>Save Edit</button>"
        //closes column and row
        myTable += "</td></tr>";
    }

但是，现在我有了这张表，我希望用户能够通过单击每行右端的编辑按钮来实际保存他们所做的任何编辑。我已经能够允许删除这样的行：

function deleteRow(rowNum){
    allWorm = JSON.parse(localStorage.getItem("allWorm"));
    allWorm.splice(rowNum, 1);
    allWorm_serialized = JSON.stringify(allWorm);
    localStorage.setItem("allWorm", allWorm_serialized);
    writeData();
}

但是我如何为 editRow 创建一个类似的函数，而不是仅仅删除行，而是通过将表编辑到 localStorage 来提交它们所做的任何更改？

作为示例，数据如下所示：

var allWorm = [
        {
            "name": "Null",
            "power": "Create an artificial cluster. Everyone added to this cluster has their parahuman abilities shared, but with a decrease in the power of each new ability.",
            "fromCanon": "Null"
        },
        {
            "name": "One",
            "power": "Thinker ability that allows for quick and efficient brainwashing given sufficient control over the victim's environment.",
            "fromCanon": "One"
        },
        {
            "name": "Two",
            "power": "Magnify other powers in close proximity.",
            "fromCanon": "Two"
        },
        {
            "name": "Four",
            "power": "Limited flight. Can hover between five and ten feet from the ground with a top speed of fifty to sixty miles per hour.",
            "fromCanon": "Four"
        },
        {
            "name": "Nine",
            "power": "Can push and pull on metals within a short range, accelerating both self and object away from or towards each other.",
            "fromCanon": "Nine"
        },
        {
            "name": "Thirteen",
            "power": "Forcefield creation.",
            "fromCanon": "Thirteen"
        }
]

标签： javascripthtml

Answer 1

这会成功的。在我当地试过。

function editRow(rowNum){
  allWorm = JSON.parse(localStorage.getItem("allWorm"));
   //because the table has a header, add 1 for the headers index
  var tds = document.querySelectorAll("tr")[rowNum + 1].childNodes;
  allWorm[rowNum].name = tds[0].textContent;
  allWorm[rowNum].power = tds[1].textContent;
  allWorm[rowNum].from = tds[2].textContent;
  allWorm_serialized = JSON.stringify(allWorm);
  localStorage.setItem("allWorm", allWorm_serialized);
}

var allWorm = [{
    "name": "Null",
    "power": "Create an artificial cluster. Everyone added to this cluster has their parahuman abilities shared, but with a decrease in the power of each new ability.",
    "fromCanon": "Null"
  },
  {
    "name": "One",
    "power": "Thinker ability that allows for quick and efficient brainwashing given sufficient control over the victim's environment.",
    "fromCanon": "One"
  },
  {
    "name": "Two",
    "power": "Magnify other powers in close proximity.",
    "fromCanon": "Two"
  },
  {
    "name": "Four",
    "power": "Limited flight. Can hover between five and ten feet from the ground with a top speed of fifty to sixty miles per hour.",
    "fromCanon": "Four"
  },
  {
    "name": "Nine",
    "power": "Can push and pull on metals within a short range, accelerating both self and object away from or towards each other.",
    "fromCanon": "Nine"
  },
  {
    "name": "Thirteen",
    "power": "Forcefield creation.",
    "fromCanon": "Thirteen"
  }
]
localStorage.setItem("allWorm", JSON.stringify(allWorm));


let data = JSON.parse(localStorage.getItem("allWorm"));

let myTable = "<table class=\"fl-table\"><tr><th>Name</th><th>Power</th><th>From</th><th>Action</th></tr>";
//loops through data
for (var i = 0; i < data.length; i++) {
  //adds new row, starts first column
  myTable += "<tr><td contentEditable>";
  //adds name
  myTable += data[i].name;
  //closes first column, adds second
  myTable += "</td><td contentEditable>";
  //adds power
  myTable += data[i].power;
  //closes second column, adds third
  myTable += "</td><td contentEditable>";
  //adds fromCanon
  myTable += data[i].fromCanon;
  //closes third column, adds fourth
  myTable += "</td><td>";
  //adds deletion button
  myTable += "<button class=\"deleteRowBtn\" onclick='deleteRow(";
  myTable += i;
  myTable += ")'>Delete</button>"
  //adds modify button
  myTable += "<button class=\"editRowBtn\" onclick='editRow(";
  myTable += i;
  myTable += ")'>Save Edit</button>"
  //closes column and row
  myTable += "</td></tr>";
}


function deleteRow(rowNum) {
  allWorm = JSON.parse(localStorage.getItem("allWorm"));
  allWorm.splice(rowNum, 1);
  allWorm_serialized = JSON.stringify(allWorm);
  localStorage.setItem("allWorm", allWorm_serialized);
  // writeData();
}

function editRow(rowNum) {
  allWorm = JSON.parse(localStorage.getItem("allWorm"));
  //because the table has a header
  var tds = document.querySelectorAll("tr")[rowNum + 1].childNodes;
  allWorm[rowNum].name = tds[0].textContent;
  allWorm[rowNum].power = tds[1].textContent;
  allWorm[rowNum].from = tds[2].textContent;
  allWorm_serialized = JSON.stringify(allWorm);
  localStorage.setItem("allWorm", allWorm_serialized);
}

document.body.innerHTML = myTable;

<body>
</body>

一旦最初加载，请删除整个var allWorm =[...data]和后续localStorage.setItem("allWorm", JSON.stringify(allWorm));行，否则本地将被覆盖。