編輯功能

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