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

使用javascript和本地存储编辑功能

2 个答案: