使用 JavaScript 和本地存储编辑功能

Question

下面是我动态生成行的代码：

function addRow() {
        var myName = document.getElementById("name");
        var type = document.getElementById("type");

        var table = document.getElementById("myTableData");
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        row.insertCell(0).innerHTML=myName.value; 
        row.insertCell(1).innerHTML=type.value; 
        row.insertCell(2).innerHTML= '<input type="button" value = "Delete" onClick="Javascript:deleteRow(this)">';
        row.insertCell(3).innerHTML=  '  <a href="#login_form" id="login_pop" onclick="Edit();">Edit</a>';

    }

以下是单击编辑链接后弹出的代码：

<a href="#x" class="overlay" id="login_form"></a>
        <div class="popup">
            <p>Please edit your details here</p>
            <div>
                <label for="firstname" id="attr_Name">Attribute Name</label>
                <input type="text" id="firstname" value="" />
            </div>
            <div>
                <label for="lastname" id="attr_Type">Attribute Type</label>
                <select  id="type1" ><option >Text</option><option >Paragraph</option><option >Dropdown</option></select>
            </div>
            <input type="button" id="button1" value="Save" onclick="saveEditedValues()"/>

            <a class="close" href="#close"></a>
        </div>

现在我正在使用本地存储来保存我编辑的值，但我不知道如何在动态生成的行中反映它。以下是本地存储的代码：

function saveEditedValues(){
        var myName = document.getElementById("firstname").value;
         alert(myName);
        var type = document.getElementById("type1").value;
        alert(type);
    localStorage.setItem("attributeName",myName.value);
    localStorage.setItem("attributeType",type.value);
    var namevar1=localStorage.getItem("attributeName");
    var namevar2=localStorage.getItem("attributeType");

    }

请提供一些帮助

Answer 1

为了更新表格，save 函数需要能够找到正确的行，这意味着您必须向其传递行号之类的内容。

添加行时，定义Edit链接的 onclick 事件处理程序以传递 rowCount

 row.insertCell(3).innerHTML=  '  <a href="#login_form" id="login_pop" onclick="Edit(' + rowCount +');">Edit</a>';

将隐藏的输入添加到弹出式div

<input type="hidden" id="editingRow" />

并让 Edit 函数填充该值：

function Edit(rowNum) {
  ...
      document.getElementById("editingRow").value = rowNum;
  ...
}

然后saveEditedValues函数可以在表中找到该行并更新值

function saveEditedValues(){
  ...
      var rowNum = document.getElementById("editingRow").value;
      var row = document.getElementById("myTableData").rows[rowNum];
      row.cells[0].innerHTML = myName;
      row.cells[1].innerHTML = type;
  ...
}

像这样： JS小提琴

Answer 2

var myName = document.getElementById("firstname").value;
alert(myName);
var type = document.getElementById("type1").value;
alert(type);

myName和type是正确的值(字符串(。所以

localStorage.setItem("attributeName",myName.value);
localStorage.setItem("attributeType",type.value);

是错误的，你必须使用这样的普通变量：

localStorage.setItem("attributeName",myName);
localStorage.setItem("attributeType",type);