{"id":18744,"date":"2022-11-01T20:33:03","date_gmt":"2022-11-01T15:03:03","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-how-to-make-input-fields-editable\/"},"modified":"2022-11-01T20:33:03","modified_gmt":"2022-11-01T15:03:03","slug":"solved-how-to-make-input-fields-editable","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-how-to-make-input-fields-editable\/","title":{"rendered":"[Solved] how to make input fields editable?"},"content":{"rendered":"<p> [ad_1]<br \/>\n<\/p>\n<div id=\"answer-19813881\" class=\"answer js-answer accepted-answer js-accepted-answer\" data-answerid=\"19813881\" data-parentid=\"19811798\" data-score=\"1\" data-position-on-page=\"1\" data-highest-scored=\"1\" data-question-has-accepted-highest-score=\"1\" itemprop=\"acceptedAnswer\" itemscope itemtype=\"https:\/\/schema.org\/Answer\">\n<div class=\"post-layout\">\n<div class=\"votecell post-layout--left\"><\/div>\n<div class=\"answercell post-layout--right\">\n<div class=\"s-prose js-post-body\" itemprop=\"text\">\n<p>This question is so specific to the OP scenario, so i will try to make the answer a bit more general. <\/p>\n<p>I&#8217;m no expert here, but it seems you already capture the user&#8217;s input and cloned it when they click Add to a new td. Therefore from what I understood is that you need to edit\/delete the data from the new created td.<\/p>\n<p>We have a table that contains several fields. We want to apply the following action on them<\/p>\n<p>1- Add<\/p>\n<p>2- Edit<\/p>\n<p>3- Delete<\/p>\n<p>Maybe this isn&#8217;t the best practice, in short, my approach for this was to insert two spans for each data value:<\/p>\n<ul>\n<li>One hidden that contains an input text field (inputSpan). <\/li>\n<li>Another just contains plain text value (dataSpan).<\/li>\n<\/ul>\n<p>Whenever you want to edit, dataSpan (just a data container) will disappear and inputSpan (text input field) appears instead enabling you to edit the text field. Once you edit and click Save the data in the text field will be cloned to replace the data in dataSpan. So basically dataSpan is just a reflection to inputSpan text field. <\/p>\n<p>Here is an updated demo: <\/p>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/jsfiddle.net\/mjoraid\/6gJX4\/66\/\">JSFiddle<\/a> &gt;&gt; <a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/jsfiddle.net\/mjoraid\/6gJX4\/66\/embedded\/result\/\">FullView Fiddle<\/a><\/p>\n<p>I suggest for readability purposes, you break your code down into small function, it will make life easier, just sayin. So here general logic for your idea:<\/p>\n<pre><code>   deleteRow = function (trID) {\n        \/\/ delete code goes here, remove the row\n        $(trID).remove();\n    }\n\nmanageEdit = function (tdNo) {\n    if ($(\"#edit-btn\" + tdNo).html() === \"Edit\") { \n        $(\"#save-btn\" + tdNo).show();\/\/show save button\n        $(\"#edit-btn\" + tdNo).html(\"Cancel\");\/\/change edit to cancle\n        editRow(tdNo);\/\/call edit function\n    } else if ($(\"#edit-btn\" + tdNo).html() === \"Cancel\") { \n        $(\"#save-btn\" + tdNo).hide();\/\/hide save button\n        $(\"#edit-btn\" + tdNo).html(\"Edit\");\/\/change back edit button to edit\n        cancelEditRow(tdNo);\n    }\n}\n\neditRow = function (tdNo) {\n    $(\".inputSpan\" + tdNo).show();\/\/show text input fields\n    $(\".dataSpan\" + tdNo).hide();\/\/hide data display\n}\n\ncancelEditRow = function (tdNo) { \n    \/\/looop thru 3 input fields by id last digit\n    for (var i = 0; i &lt; 3; i++) {\n        \/\/get input span that contain the text field\n        var inputSpan = $(\"#inputSpan\" + tdNo + \"-\" + i);\n        \/\/get the data span that contain the display data\n        var dataSpan = $(\"#dataSpan\" + tdNo + \"-\" + i);\n        \/\/text field inside inputSpan\n        var textField = inputSpan.find('input:text');\n        inputSpan.hide();\/\/hide input span\n        textField.val(dataSpan.html());\/\/take original data from display span and put it inside text field to cncle changes. \n        dataSpan.show();\/\/show data span instead of edit field\n    }\n}\n\nsaveRow = function (tdNo) { \n    \/\/same as edit, but we reverse the data selection. \n    for (var i = 0; i &lt; 3; i++) {\n        var inputSpan = $(\"#inputSpan\" + tdNo + \"-\" + i);\n        var dataSpan = $(\"#dataSpan\" + tdNo + \"-\" + i);\n        var textField = inputSpan.find('input:text');\n        inputSpan.hide();\n        dataSpan.html(textField.val());\/\/take data from text field and put into dataSpan\n        dataSpan.show();\n\n    }\n    $(\"#edit-btn\" + tdNo).html(\"Edit\");\/\/change text to edit\n    $(\"#save-btn\" + tdNo).hide();\/\/hide same button. \n}\n<\/code><\/pre>\n<p>Here where I add the spans: <\/p>\n<pre><code>     var tdCounter = 0;             \n      $(\".span4\").each(function () { \n           var tid =  val+\"-\"+tdCounter;  \n          $tr.append(\"&lt;td id='#mytd\"+tid+\"'&gt;\n&lt;span id='inputSpan\"+tid+\"' class=\"inputSpan\"+val+\"\" style=\"display:none\"&gt;\n&lt;input type=\"text\" id='#input\"+tid+\"' value=\"\"+ $(this).val() + \"\" \/&gt;&lt;\/span&gt;\n&lt;span id='dataSpan\"+tid+\"'  class=\"dataSpan\"+val+\"\"&gt;\"+$(this).val()+\"&lt;\/td&gt;\");               \n          tdCounter++;              \n                });\n<\/code><\/pre>\n<p>Here I just append the buttons to call the functions, each button works for it&#8217;s own row:<\/p>\n<pre><code>   $tr.append(\"&lt;td&gt;&lt;botton id='edit-btn\" + val + \"' class=\"btn\" onclick=manageEdit('\" + val + \"');&gt;Edit&lt;\/botton&gt;&lt;\/td&gt;\");\n   $tr.append(\"&lt;td&gt;&lt;botton style=\"display:none\" id='save-btn\" + val + \"' class=\"btn\" onclick=saveRow('\" + val + \"');&gt;Save&lt;\/botton&gt;&lt;\/td&gt;\");\n   $tr.append(\"&lt;td&gt;&lt;botton id='delete-btn\" + val + \"' class=\"btn\" onclick=deleteRow('\" + trID + \"');&gt;Delete&lt;\/botton&gt;&lt;\/td&gt;\");\n<\/code><\/pre>\n<\/p><\/div>\n<div class=\"mt24\"><\/div>\n<\/div>\n<p>            <span class=\"d-none\" itemprop=\"commentCount\">9<\/span> <\/p><\/div>\n<\/div>\n<p>[ad_2]<\/p>\n<p>solved how to make input fields editable? <\/p>\n","protected":false},"excerpt":{"rendered":"<p>[ad_1] This question is so specific to the OP scenario, so i will try to make the answer a bit more general. I&#8217;m no expert here, but it seems you already capture the user&#8217;s input and cloned it when they click Add to a new td. Therefore from what I understood is that you need &#8230; <a title=\"[Solved] how to make input fields editable?\" class=\"read-more\" href=\"https:\/\/jassweb.com\/solved\/solved-how-to-make-input-fields-editable\/\" aria-label=\"More on [Solved] how to make input fields editable?\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[333,388,532],"class_list":["post-18744","post","type-post","status-publish","format-standard","hentry","category-solved","tag-javascript","tag-jquery","tag-twitter-bootstrap"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>[Solved] how to make input fields editable? - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-how-to-make-input-fields-editable\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] how to make input fields editable? - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] This question is so specific to the OP scenario, so i will try to make the answer a bit more general. I&#8217;m no expert here, but it seems you already capture the user&#8217;s input and cloned it when they click Add to a new td. Therefore from what I understood is that you need ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-how-to-make-input-fields-editable\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-01T15:03:03+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-how-to-make-input-fields-editable\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-how-to-make-input-fields-editable\\\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/person\\\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] how to make input fields editable?\",\"datePublished\":\"2022-11-01T15:03:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-how-to-make-input-fields-editable\\\/\"},\"wordCount\":262,\"publisher\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\"},\"keywords\":[\"javascript\",\"jquery\",\"twitter-bootstrap\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-how-to-make-input-fields-editable\\\/\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-how-to-make-input-fields-editable\\\/\",\"name\":\"[Solved] how to make input fields editable? - JassWeb\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#website\"},\"datePublished\":\"2022-11-01T15:03:03+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-how-to-make-input-fields-editable\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-how-to-make-input-fields-editable\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-how-to-make-input-fields-editable\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] how to make input fields editable?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#website\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/jassweb.com\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/jass-website-logo-1.png\",\"contentUrl\":\"https:\\\/\\\/jassweb.com\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/person\\\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777613206\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777613206\",\"contentUrl\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777613206\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\\\/\\\/jassweb.com\"],\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/author\\\/jaspritsinghghumangmail-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] how to make input fields editable? - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-how-to-make-input-fields-editable\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] how to make input fields editable? - JassWeb","og_description":"[ad_1] This question is so specific to the OP scenario, so i will try to make the answer a bit more general. I&#8217;m no expert here, but it seems you already capture the user&#8217;s input and cloned it when they click Add to a new td. Therefore from what I understood is that you need ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-how-to-make-input-fields-editable\/","og_site_name":"JassWeb","article_published_time":"2022-11-01T15:03:03+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-make-input-fields-editable\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-make-input-fields-editable\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] how to make input fields editable?","datePublished":"2022-11-01T15:03:03+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-make-input-fields-editable\/"},"wordCount":262,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["javascript","jquery","twitter-bootstrap"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-make-input-fields-editable\/","url":"https:\/\/jassweb.com\/solved\/solved-how-to-make-input-fields-editable\/","name":"[Solved] how to make input fields editable? - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-11-01T15:03:03+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-how-to-make-input-fields-editable\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-how-to-make-input-fields-editable\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-how-to-make-input-fields-editable\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] how to make input fields editable?"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777613206","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777613206","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777613206","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/18744","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=18744"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/18744\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=18744"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=18744"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=18744"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}