Question

我正在开展一个项目，我可以在其中添加演员＆＃39;通过Form输入到表格，允许我点击表格行并将所选Actor的数据拉回到表格中进行更新/删除。我能够选择数据并删除行，但我无法弄清楚如何更新现有行。我似乎无法找到任何有助于将新输入链接到现有对象数据的内容。

*******更新了*********

var actors = [];


var selectActor = function (e) {
    e.preventDefault();
    var rowClicked = $(this).parent().parent();
    row = rowClicked.index();
    alert(actors[row].fName + " " + actors[row].lName + " " + actors[row].gender + " " + actors[row].birthDate + " " + actors[row].action + " " + actors[row].comedy + " " + actors[row].drama + " " + actors[row].suspense + " " + actors[row].sciencefiction + " " + actors[row].horror);
    console.log(actors[row]);
    var idx = $(this).attr("data-idx");
    var actor = actors[idx];
    $("#updateActor").attr("rowid",idx);
    for (var key in actor) {
        var ele = $("#" + fieldTypes[key].id);
        var type = fieldTypes[key].type;
        switch (type) {
            case "input":
                ele.val(actor[key]);
                break;
            case "radio":
                var name = fieldTypes[key].name;
                $("[name='" + name + "']").prop({ checked:false });
                $("[name='" + name + "'][value='" + actor[key] + "']").prop({ checked:true });
                break;
            case "checkbox":
                $("#" + fieldTypes[key].id).prop("checked", actor[key]);
                break;

        }
    }
    actorState("old");
};

得益于以下海报的帮助，它能够更新。

var updateActor = function() {
    $("#updateActor").unbind();

    // Assigning Form values to variables
    var firstN = $("#fName").val();
    var lastN = $("#lName").val();
    var gender = $("[name='gender']:checked").val();
    var birthdate = $("#birthDate").val();
    var action = $("#action").prop('checked');
    var comedy = $("#comedy").prop('checked');
    var drama = $("#drama").prop('checked');
    var sciencefiction = $("#sciencefiction").prop('checked');
    var horror =$("#horror").prop('checked');
    var suspense = $("#suspense").prop('checked');

    // creates updateActor variable that contains an object for each input value
    var updateActor = {fName: firstN, lName: lastN, gender: gender, birthDate: birthdate, action: action, comedy: comedy, drama: drama, suspense: suspense, sciencefiction: sciencefiction, horror: horror}

    var rowId = $("#updateActor").attr("rowid");

    // Creates a table of links for each added actor  with an id based from # of actors
    $("#actorsTable").find("a[data-idx='"+rowId+"']").replaceWith("<a href='' onclick='deleteActor(this)' class='update' data-idx='" + rowId + "'>" + updateActor.fName + " " + updateActor.lName + "</a>");

    actors.push(updateActor);
    actorState ("new");

};

Example in action

Answer 1

上面脚本中有4个错误

1）更新陈述中下面一行中的newActor应更改为updateActor

$("#actorsTable").append("<tr><td><a href='' onclick='deleteActor(this)' class='update' data-idx='" + actors.length + "'>" + updateActor.fName + " " + updateActor.lName + "</a></td></tr> ");

2）

var firstN = $("#fName"[row]).val();

需要

var firstN = $("#fName").val();

3）你需要更新＆＃34;演员[row]＆＃34;在更新功能中 4）您需要从表中删除更新行（旧数据），因为您在函数末尾添加了新数据。

Answer 2

在您的脚本中进行一些更改，然后就可以了。

1）当您通过单击表格行选择记录时，将相应的data-idx值应用于＆＃34; updateActor＆＃34;按钮通过添加一些属性（即rowid）。

在＆＃34; var actor = actors [idx];＆＃34;之后添加以下代码行在你的＆＃34; selectActor＆＃34;中做同样的事情。功能

$("#updateActor").attr("rowid",idx);

2）更改你的代码＆＃34; updateActor＆＃34;功能如下：

2.1）替换

var firstN = $("#fName"[row]).val();

与

var firstN = $("#fName").val();

2.2）在创建＆＃34; updateActor＆＃34;之后添加以下代码行。包含每个输入值的对象的变量（即var updateActor = {fName：firstN，lName：lastN，...）

var rowId = $("#updateActor").attr("rowid");

2.3）替换

$("#actorsTable").append("<tr><td><a href='' onclick='deleteActor(this)' class='update' data-idx='" + actors.length + "'>" + newActor.fName + " " + newActor.lName + "</a></td></tr> ");

与

$("#actorsTable").find("a[data-idx='"+rowId+"']").replaceWith("<a href='' onclick='deleteActor(this)' class='update' data-idx='" + rowId + "'>" + updateActor.fName + " " + updateActor.lName + "</a>");

通过将数据拉入表单来更新现有表行

2 个答案: