javascript - Create button and click handler with JQuery -
currently displaying table of values, last column provides "edit" , "delete" option. simplicity, when edit row, clearing each column's innerhtml , placing input fields there instead. need replace edit/delete links save/cancel, need create these buttons js/jquery, attach click handlers them append them innerhtml.
while have found similar examples, not quite clear on how accomplish , appreciate help.
function editrecord(line) { var zone = "<?= $data['zone']; ?>"; // store original field values var valuename = document.getelementbyid("entryname" + line).innerhtml; var valuettl = document.getelementbyid("entryttl" + line).innerhtml; var valueaddress = document.getelementbyid("entryaddress" + line).innerhtml; // replace existing row value input fields make edits document.getelementbyid("entryname" + line).innerhtml = "<input type='text' value='" + valuename + "'>"; document.getelementbyid("entryttl" + line).innerhtml = "<input type='text' value='" + valuettl + "'>"; document.getelementbyid("entryaddress" + line).innerhtml = "<input type='text' value='" + valueaddress + "'>"; // create save button click handler // create cancel button click handler // append these element below (replacing edit/delete) document.getelementbyid("entryoptions" + line).innerhtml = "<input type='button' value='save'> <input type='button' value='cancel'>"; }
after further tinkering, managed figure out. here working code should end helping else.
function editrecord(line) { var zone = "<?= $data['zone']; ?>"; // store original field values var originalname = document.getelementbyid("entryname" + line).innerhtml; var originalttl = document.getelementbyid("entryttl" + line).innerhtml; var originaladdress = document.getelementbyid("entryaddress" + line).innerhtml; // replace existing row value input fields make edits document.getelementbyid("entryname" + line).innerhtml = "<input type='text' value='" + originalname + "'>"; document.getelementbyid("entryttl" + line).innerhtml = "<input type='text' value='" + originalttl + "'>"; document.getelementbyid("entryaddress" + line).innerhtml = "<input type='text' value='" + originaladdress + "'>"; document.getelementbyid("entryoptions" + line).innerhtml = ""; var savebutton = $('<button/>', { text: "save", id: 'btn_save' + line, click: function () { // save changes } }); var cancelbutton = $('<button/>', { text: "cancel", id: 'btn_cancel' + line, click: function () { document.getelementbyid("entryname" + line).innerhtml = originalname; document.getelementbyid("entryttl" + line).innerhtml = originalttl; document.getelementbyid("entryaddress" + line).innerhtml = originaladdress; } }); $("#entryoptions" + line).append(savebutton); $("#entryoptions" + line).append(cancelbutton); }
Comments
Post a Comment