javascript - 使用 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>

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

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

为了更新表格，保存函数需要能够找到正确的行，这意味着您必须将行号之类的东西传递给它。

添加行时，定义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;
  ...
}

像这样:jsFiddle