Question

我正在构建一个具有注册表单的应用程序。当我单击submit时，将动态创建一个新表行，并将该表保存在本地存储中。表格行后面附加了Edit和Delete按钮。当我点击Edit时， td 中具有类别名称，邮件，暴民，添加的数据应填充名称，电子邮件，移动电话。以及注册表格中的地址字段。此外，当我提交时，更改应在我单击了其编辑按钮的同一表行中进行更新。

但是，代替的是，创建了一条新记录。我正在尝试将行id传递给代码中的add函数，这是我到目前为止所做的。

function save(){
    var taskList = [];
    $("#saveTable tbody").find("tr").each(function(){
         var task = {};
        var currentRow  = $(this).closest("tr");
        task.name    = currentRow.find('.name').text();
        task.mail     = currentRow.find(".mail").text();
        task.mob =    currentRow.find(".mob").text(); 
        task.add = currentRow.find(".add").text(); 
        task.Country = currentRow.find(".country").text();
        task.State = currentRow.find(".state").text(); 
        taskList.push(task);
    });
    saveObject("tasks",taskList);   
}
function saveObject(recordKey,jsObject){
    var objectAsString = JSON.stringify(jsObject);
    localStorage.setItem(recordKey,objectAsString);
}
function load(){
    var taskList = loadObject("tasks");
    for(var index=0; taskList && index<taskList.length; ++index){
        this.add(taskList[index]);
    }

}
 function loadObject(recordKey){
    var objectAsString = localStorage.getItem(recordKey);
    return JSON.parse(objectAsString);
}

function add(taskObject,index){
    if(index){
        console.log(index);
        var update = $('#saveTable tbody').find('tr').eq(index);


    }
    var newTR = $("<tr class='child'></tr>");
    var newName = $("<td class='name'></td>");
    var newMail = $("<td class='mail'></td>");
    var newMob = $("<td class='mob'></td>");
    var newAdd = $("<td class='add'></td>");
    var newCountry = $("<td class='country'></td>");
    var newState = $("<td class='state'></td>");
    var edit = $("<input class='button_ed' type='submit' value='Edit'/>");
    var del = $("<input class='button_del' type='submit' value='Delete'/>");

    $(newTR).append($(newName).text(taskObject.name));
    $(newTR).append($(newMail).text(taskObject.mail));
    $(newTR).append($(newMob).text(taskObject.mob));
    $(newTR).append($(newAdd).text(taskObject.add));
    $(newTR).append($(newCountry).text(taskObject.Country));
    $(newTR).append($(newState).text(taskObject.State));
    $(newTR).append($(edit)).append($(del));
    $("#saveTable tbody").append($(newTR));
    $(edit).on("click",function myEdit(){
        event.preventDefault();
        if (this.value=="Edit") {
            this.value="Save";
         var ed = this.closest("tr");
         $('#contact_name').val($(ed).children("td.name").text());
         $('#contact_email').val($(ed).children("td.mail").text());
         $('#contact_mob').val($(ed).children("td.mob").text());
         $('#contact_address').val($(ed).children("td.add").text());
         $('#contact_name').addClass("valid");
         $('#contact_email').addClass("valid");
         $('#contact_mob').addClass("valid");
         $('#contact_address').addClass("valid");
         //collect table row id in variable and pass it to add function
         index = ed.rowIndex;
         //console.log(index);
         save();
        }
    });
    $(del).on("click",function myDel(){
        $(this).closest("tr").remove();
        save();
    });
}

使用jQuery动态更新现有表记录

0 个答案: