将对象数组绑定到其特定的表单字段以进行更新/删除

我需要将表单数据作为链接存储到对象数组中。 然后可以单击该链接并填写表单以及要更新或删除的对象/数据。

我能够将表单数据作为对象存储在数组中，但无法弄清楚如何将其加载回表单进行更新。

var actors = []; var addActor = function() { // 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 newActor variable that contains an object for each input value var newActor = {fName: firstN, lName: lastN, gender: gender, birthDate: birthdate, action: action, comedy: comedy, drama: drama, suspense: suspense, sciencefiction: sciencefiction, horror: horror} $("#actorsTable").append("" + newActor.fName + " " + newActor.lName + " "); actors.push(newActor); console.log(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]); }; 

这是我到目前为止所采取的行动。 当我检查控制台时，存储和选择的一切都是正确的，但我找不到任何显示如何将对象存储到其尊重的表单字段中的内容。

Codepen

Answer 1

考虑为代码使用命名空间，然后为对象操作（如数组）创建一些通用函数，以及为表单创建一些特定函数。 请注意，像angular，react等一些库会为你处理一些这样的问题，但是你要求手动部分，并且在一种方法上也可能值得一些研究。

这是一个更新的样本： http ： //codepen.io/MarkSchultheiss/pen/LNqdxK？编辑= 0010

 var myApp = myApp || {}; myApp.arrayObj = { indexOf: function(myArray, searchTerm, property) { for (var i = 0; i < myArray.length; i++) { if (myArray[i][property] === searchTerm) return i; } return -1; }, indexAllOf: function(myArray, searchTerm, property) { var ai = []; for (var i = 0; i < myArray.length; i++) { if (myArray[i][property] === searchTerm) ai.push(i); } return ai; }, lookup: function(myArray, searchTerm, property, firstOnly) { var found = []; var i = myArray.length; while (i--) { if (myArray[i][property] === searchTerm) { found.push(myArray[i]); if (firstOnly) break; //if only the first } } return found; }, lookupAll: function(myArray, searchTerm, property) { return this.lookup(myArray, searchTerm, property, false); }, remove: function(myArray, searchTerm, property, firstOnly) { for (var i = myArray.length - 1; i >= 0; i--) { if (myArray[i][property] === searchTerm) { myArray.splice(i, 1); if (firstOnly) break; //if only the first term has to be removed } } }, removeByIndex: function(myArray, index) { myArray.splice(index, 1); } }; myApp.func = { hasDuplicates: function(actor) { var allLast = myApp.arrayObj.lookup(myApp.data.actors, actor.lName, "lName", false); var allFirst = myApp.arrayObj.lookup(allLast, actor.fName, "fName", true); return !!allFirst.length; }, appendActorRow: function(newActor) { myApp.data.actorsTable.append("" + newActor.fName + " " + newActor.lName + ""); }, getActor: function() { var newActor = { fName: $("#fName").val(), lName: $("#lName").val(), gender: $("input[type=radio][name='gender']:checked").val(), birthDate: $("#birthDate").val(), action: $("#action").prop('checked'), comedy: $("#comedy").prop('checked'), drama: $("#drama").prop('checked'), suspense: $("#suspense").prop('checked'), sciencefiction: $("#sciencefiction").prop('checked'), horror: $("#horror").prop('checked'), actorId: $("#fName").data('actorid') } return newActor; }, putActor: function(actor) { $("#fName").val(actor.fName); $("#lName").val(actor.lName); $("input[type=radio][name='gender']").val(actor.gender); $("#birthDate").val(actor.birthDate); $("#action").prop('checked', actor.action); $("#comedy").prop('checked', actor.comedy); $("#drama").prop('checked', actor.drama); $("#suspense").prop('checked', actor.suspense); $("#sciencefiction").prop('checked', actor.sciencefiction); $("#horror").prop('checked', actor.horror); $("#fName").data('actorid', actor.actorId); }, addActor: function(allowDuplicates) { var newActor = myApp.func.getActor(); var validActor = false; if (!allowDuplicates && !myApp.func.hasDuplicates(newActor)) { validActor = true; } if (!validActor && allowDuplicates) { validActor = true; } if (validActor) { myApp.data.lastActorId = myApp.data.lastActorId + 1; newActor.actorId = myApp.data.lastActorId; myApp.func.appendActorRow(newActor); myApp.data.actors.push(newActor); } return newActor; }, updateRowByIndex: function(actor, index) { myApp.data.actorsTable.eq(index).html(actor.fName + " " + actor.lName).data("actorid", actor.actorId).addClass('update'); }, updateRowByActorId: function(actor, actorId) { var r = myApp.data.actorsTable.find('a[data-actorid="' + actorId + '"]'); r.html(actor.fName + " " + actor.lName).data("actorid", actor.actorId).addClass('update'); }, clearForm: function() { $('#fName').val(""); $('#lName').val(""); $('#birthDate').val(""); $('#form').find('input[type="checkbox"]').prop("checked", false); $('#form').find('input[type="radio"]').prop("checked", false); return this; }, selectActor: function(e) { e.preventDefault(); var selectActorId = $(this).data('actorid'); var actor = myApp.arrayObj.lookup(myApp.data.actors, selectActorId, "actorId", true)[0]; myApp.func.putActor(actor); myApp.func.setButtons("old") }, updateActor: function() { var actor = myApp.func.getActor(); var index = myApp.arrayObj.indexOf(myApp.data.actors, actor.actorId, "actorId", true); if (index != -1) { myApp.data.actors[index] = actor; myApp.func.updateRowByActorId(actor, actor.actorId); } }, deleteActor: function() { var actor = myApp.func.getActor(); var index = myApp.arrayObj.indexOf(myApp.data.actors, actor.actorId, "actorId", true); if (index != -1) { var r = myApp.data.actorsTable.find('a[data-actorid="' + actor.actorId + '"]'); r.parents('tr').remove(); // either will work, used the index one // myApp.arrayObj.remove(myApp.data.actors, actor.actorId, "actorId", true); myApp.arrayObj.removeByIndex(myApp.data.actors, index); } myApp.func.clearForm().setButtons("new"); // myApp.func.setButtons("new"); }, setButtons: function(foo) { // if page is new only or form is being filled with new data // show 'Add Actor' button only $("#addNewActor").toggle((foo === "new")); $("#updateActor").toggle(!(foo === "new")); $("#deleteActor").toggle(!(foo === "new")); } }; myApp.data = { actors: [], actorsTable: $("#actorsTable"), lastActorId: 0 }; /* end of myApp */ // Function checks state of page and shows/hides buttons var actorStatex = function(foo) { // if page is new only or form is being filled with new data // show 'Add Actor' button only $("#addNewActor").toggle((foo === "new")); $("#updateActor").toggle(!(foo === "new")); $("#deleteActor").toggle(!(foo === "new")); }; var validateForm = function(e) {}; $(document).ready(function() { $('#results').on('click', '.update', myApp.func.selectActor); $("#birthDate").datepicker(); myApp.func.setButtons("new"); $("#addNewActor").on('click', function() { var addedActor = myApp.func.addActor(false); }); $("#updateActor").on('click', myApp.func.updateActor); $("#deleteActor").on('click', myApp.func.deleteActor); $("#clearButton").on('click', function() { myApp.func.clearForm(); myApp.func.setButtons("new"); }); }); 

Answer 2

这是因为警报中属性的名称与newActor对象中的属性名称不匹配。

你应该使用alert（actors [row] .fName）而不是alert（actors [row] .fname）

顺便说一句，你可以使用你的表单id #actorForm来简化它

它应该是这样的（我没有测试过）

 var actors = [], index = 0; $("#addNewActor").click(function() { var newActor = $('#actorForm').serialize(); $("#actorsTable").append("" + newActor.fName + " " + newActor.lName + " "); actors.push(newActor); }); // select actor $(document).on('click', '#actorsTable tr', function() { if(actors[$(this).index]) { index = $(this).index(); var actor = actors[index]; // populate your form } }); $("#updateActor").click(function() { var newActor = $('#actorForm').serialize(); actors[index] = newActor; }); $("#deleteActor").click(function() { actors.splice(index, 1); });