编辑功能

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

为了更新表，保存功能将需要能够找到正确的行，这意味着你将不得不通过它像行号一样。

当添加行，定义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

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