使用javascript和本地存储编辑功能 [英] Edit functionality using javascript and local storage

问题描述

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

Below is my code for dynamic generation of rows:

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>';


    }

以下是我的弹出窗口代码点击编辑链接：

and below is my code for popup after clicking on edit link:

<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>

现在我使用本地存储来保存我编辑的值，但我没有得到如何反映它动态生成的行。下面是本地存储的代码：

Now I am using local storage to save my edited values but I am not getting how to reflect it in the dynamically generated rows. Below is code for Local storage:

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


    }

请提供一些帮助

推荐答案

为了更新表，save函数需要能够找到正确的行，这意味着你必须通过它类似于行号。

In order to update the table, the save function will need to be able to locate the correct row, which means you will have to pass it something like the row number.

添加行时，定义编辑链接的onclick事件处理程序以通过rowCount

When adding the row, define the onclick event handler of the Edit link to pass rowCount

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

为弹出式div添加隐藏的输入

Add a hidden input to your popup div

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

并让编辑函数填充该值：

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

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

Then the saveEditedValues function can locate the row in the table and update the values

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

这篇关于使用javascript和本地存储编辑功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！