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

Popular posts from this blog

html - Outlook 2010 Anchor (url/address/link) -

javascript - Why does running this loop 9 times take 100x longer than running it 8 times? -

Getting gateway time-out Rails app with Nginx + Puma running on Digital Ocean -