CODEWITHSUNDEEP
javascripthtml
shefali
shefali

Reputation: 69

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


    }

Please provide some help

Upvotes: 2

Views: 1665

Answers (2)

Joe
Joe

Reputation: 28326

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.

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

Add a hidden input to your popup div

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

and have the Edit function populate that value:

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

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

like so: jsFiddle

Upvotes: 1

til_b
til_b

Reputation: 325

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

myName and type are the correct values (strings). So

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

is wrong, you have to use the plain variables like this:

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

Upvotes: 0

Related Questions