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

我正在创建一个应用程序，其中有一个注册表格。当我单击提交时，将动态创建一个新表行，并将该表保存在本地存储器中<代码>编辑和

删除

按钮随表格行一起追加。当我点击

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

函数保存（）{
var taskList=[]；
$（“#saveTable tbody”）.find（“tr”）.each（function（）{
var task={}；
var currentRow=$（此）；
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（）；
任务列表。推送（任务）；
});
保存对象（“任务”，任务列表）；
}
函数saveObject（recordKey，jsObject）{
var objectAsString=JSON.stringify（jsObject）；
setItem（recordKey，objectAsString）；
}
函数加载（）{
var taskList=loadObject（“任务”）；
对于（var index=0；taskList&&indexsave（）的作用是什么？如何将数据保存到数据库？它似乎位于$（编辑）中的某个位置。on（'click'））函数应该有一个对db的put方法调用。我正在将数据保存在本地存储器中。我已经为保存函数添加了代码供您参考。我不确定您是如何使用这两个加载函数的，但看起来您在编辑函数中获取所选行，然后调用save（），然后在save（）中执行相同的操作函数，该函数调用saveObject（）并将其保存到本地存储。在edit（）函数中，不要调用save（）…而是执行本地存储get by，例如电子邮件地址或其中唯一的内容来查找记录。从本地获取记录后，使用edit（）中的当前行值进行设置函数。您的loadObject（）函数似乎已经在执行此操作。除非没有其他唯一值，否则我不会集中精力尝试获取数组中的rowId。如果要使用rowId，则必须将其添加到tasklist[]中，例如：task.id=currentRow.rowIndex；