{"id":12100,"date":"2024-02-12T22:38:14","date_gmt":"2024-02-12T17:08:14","guid":{"rendered":"https:\/\/selfimagination.in\/tips\/?p=12100"},"modified":"2024-02-12T22:38:16","modified_gmt":"2024-02-12T17:08:16","slug":"update-google-sheet-from-html-table-crud","status":"publish","type":"post","link":"https:\/\/selfimagination.in\/tips\/update-google-sheet-from-html-table-crud\/","title":{"rendered":"Update Google Sheet From HTML Table Using Apps Script (CRUD)"},"content":{"rendered":"\n<p>Learn How to Update Google Sheet From HTML Table, enabling interactive selection of rows that open in a form for editing. Follow this step-by-step tutorial to seamlessly update records back to Google Sheet upon form submission. Enhance your web development skills and streamline data management effortlessly.<\/p>\n\n\n\n<p>\u0907\u0938 Article \u092e\u0947 \u0939\u092e\u0928\u0947 \u091c\u094b \u092a\u093f\u091b\u0932\u0947 Article \u092e\u0947 Create \u0914\u0930 Read \u0915\u093f\u092f\u093e \u0925\u093e \u0909\u0938\u0940 \u0915\u094b \u0906\u0917\u0947 \u092c\u095d\u093e\u0924\u0947 \u0939\u0941\u0935\u0947 \u0909\u0938\u092e\u0947 Update \u0915\u0930 \u0915\u093e\u0930\u094d\u092f \u0915\u093f\u092f\u093e \u0939\u0948\u0902 \u0964 \u0907\u0938\u092e\u0947 \u0939\u092e\u0928\u0947 Data \u0915\u094b \u0909\u0938\u0940 Form \u092a\u0930 open \u0915\u093f\u092f\u093e \u0939\u0948\u0902 \u0914\u0930 Update \u0915\u093f\u092f\u093e \u0939\u0948\u0902\u0964 \u092a\u093f\u091b\u0932\u0947 Article \u0906\u092a \u0928\u093f\u092e\u094d\u0928 link \u0938\u0947 Read \u0915\u0930 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902 \u0964 <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/selfimagination.in\/tips\/create-dynamic-html-forms-apps-script-crud\/\"><strong>Create :<\/strong> Create Dynamic Form (CRUD)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/read-dynamic-google-sheet-data-to-html\/\"><strong>Read :<\/strong> Read Dynamic Form (CRUD)<\/a><\/li>\n\n\n\n<li><strong>Update :<\/strong> \u092f\u0939 Article Update \u0915\u0947 \u0932\u093f\u090f \u0939\u0940 \u0939\u0948\u0902 \u0964 <\/li>\n\n\n\n<li><strong>Delete :<\/strong> \u091c\u0932\u094d\u0926 \u0939\u0940 Publish \u0939\u094b\u0928\u0947 \u0935\u093e\u0932\u093e \u0939\u0948\u0902 \u0964 <\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Table of Contents<\/h2><nav><ul><li><a href=\"#1-google-sheet\">1. Google Sheet <\/a><ul><li><a href=\"#1-1-sheet-for-form-design\">1.1 Sheet for Form Design <\/a><\/li><li><a href=\"#1-2-sheet-for-form-data-storage\">1.2 Sheet for Form Data Storage<\/a><\/li><\/ul><\/li><li><a href=\"#2-html-code-for-update-google-sheet-from-html-table\">2. HTML Code for Update Google Sheet From HTML Table<\/a><\/li><li><a href=\"#3-css-code-for-update-google-sheet-from-html-table\">3. CSS Code for Update Google Sheet From HTML Table<\/a><\/li><li><a href=\"#4-java-script-code-for-update-google-sheet-from-html-table\">4. JavaScript Code for Update Google Sheet From HTML Table<\/a><\/li><li><a href=\"#5-apps-script-code-for-update-google-sheet-from-html-table\">5. Apps Script Code for Update Google Sheet From HTML Table<\/a><\/li><li><a href=\"#6-project-deployment\">6. Project Deployment<\/a><\/li><li><a href=\"#7-project-execution\">7. Project Execution <\/a><\/li><li><a href=\"#\u0939\u092e\u093e\u0930\u0947-\u0905\u0928\u094d\u092f-\u0906\u0930\u094d\u091f\u093f\u0915\u0932\">\u0939\u092e\u093e\u0930\u0947 \u0905\u0928\u094d\u092f \u0906\u0930\u094d\u091f\u093f\u0915\u0932<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"\ud83d\udcf03. CRUD : Update - Google Sheet Data to HTML Table | Interactive Form\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/DD-VvIMYhOg?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"1-google-sheet\">1. Google Sheet <\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1-1-sheet-for-form-design\">1.1 Sheet for Form Design <\/h3>\n\n\n\n<p>\u0938\u092c\u0938\u0947 \u092a\u0939\u0932\u0947 \u0939\u092e \u0928\u093f\u092e\u094d\u0928 \u092a\u094d\u0930\u0915\u093e\u0930 \u0938\u0947 \u090f\u0915 Google Sheet \u092c\u0928\u093e\u090f\u0902\u0917\u0947 \u091c\u093f\u0938\u0915\u093e \u0928\u093e\u092e \u0939\u092e Form \u0930\u0916\u0947\u0902\u0917\u0947\u0964 \u0907\u0938\u092e\u0947 \u0906\u092a \u091c\u093f\u0924\u0928\u0940 Entry \u0915\u0930\u0947\u0902\u0917\u0947 \u0909\u0924\u0928\u0947 Form \u092a\u0930 Column \u092c\u0928 \u091c\u093e\u090f\u0902\u0917\u0947, \u0907\u0938 Sheet \u0915\u0947 \u0906\u0927\u093e\u0930 \u092a\u0930 \u0939\u0940 Form \u092e\u0947 Input \u092c\u0928\u0924\u0947 \u0939\u0948\u0902\u0964 <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"497\" height=\"374\" src=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2024\/02\/image-7.png?resize=497%2C374&#038;ssl=1\" alt=\"Dynamic HTML Form\" class=\"wp-image-12217\" style=\"width:302px;height:auto\" srcset=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2024\/02\/image-7.png?w=497&amp;ssl=1 497w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2024\/02\/image-7.png?resize=300%2C226&amp;ssl=1 300w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2024\/02\/image-7.png?resize=150%2C113&amp;ssl=1 150w\" sizes=\"auto, (max-width: 497px) 100vw, 497px\" \/><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>ID :<\/strong> \u0906\u092a\u0915\u094b  ID \u092e\u0947 \u0906\u092a\u0915\u094b Unique \u0935\u0948\u0932\u094d\u092f\u0942 \u0926\u0947\u0928\u093e \u0939\u0948\u0902  \u0964 <\/li>\n\n\n\n<li><strong>Name :<\/strong> \u0906\u092a\u0915\u094b \u091c\u094b Heading \u0926\u0947\u0928\u093e \u0939\u0948\u0902 \u0935\u0939 \u0906\u092a \u0907\u0938 Column \u092e\u0947 \u0932\u093f\u0916 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902 \u0964 <\/li>\n\n\n\n<li><strong>Type :<\/strong> \u0907\u0938\u092e\u0947 \u0906\u092a\u0915\u094b Input \u0915\u093e type \u0926\u0947\u0928\u093e \u0939\u0948\u0902\u0964 \u092f\u0926\u093f String \u0915\u0947 \u0932\u093f\u090f text \u0914\u0930 Number \u0915\u0947 \u0932\u093f\u090f Number \u0906\u0926\u093f\u0964 <\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1-2-sheet-for-form-data-storage\">1.2 Sheet for Form Data Storage<\/h3>\n\n\n\n<p>Data Entry \u0915\u0947 \u092c\u093e\u0926 Sheet \u0906\u092a\u0915\u094b \u0915\u0941\u091b \u0907\u0938 \u092a\u094d\u0930\u0915\u093e\u0930 \u0926\u093f\u0916\u093e\u0908 \u0926\u0947\u0917\u0940 , \u0906\u092a \u091a\u093e\u0939\u0947 \u0924\u094b \u092a\u0939\u0932\u0947 \u0938\u0947 \u092d\u0940 data Enter \u0915\u0930 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902 \u0964 \u0907\u0938\u092e\u0947 \u0906\u092a\u0915\u094b Columns \u0915\u0947 Heading \u0926\u0947\u0928\u093e \u0939\u094b\u0902\u0917\u0947\u0964 <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"457\" height=\"396\" src=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2024\/02\/image-6.png?resize=457%2C396&#038;ssl=1\" alt=\"Dynamic HTML Form Data\" class=\"wp-image-12216\" style=\"width:299px;height:auto\" srcset=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2024\/02\/image-6.png?w=457&amp;ssl=1 457w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2024\/02\/image-6.png?resize=300%2C260&amp;ssl=1 300w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2024\/02\/image-6.png?resize=150%2C130&amp;ssl=1 150w\" sizes=\"auto, (max-width: 457px) 100vw, 457px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"2-html-code-for-update-google-sheet-from-html-table\">2. HTML Code for Update Google Sheet From HTML Table<\/h2>\n\n\n\n<p>\u092f\u0939 HTML Code \u0939\u0948\u0902 \u0907\u0938\u092e\u0947 Form \u0914\u0930 Table \u0926\u094b\u0928\u094b\u0902 \u0915\u093e \u0939\u0940 code \u0939\u0948 \u0964 \u0907\u0938\u0947 \u092c\u0928\u093e\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0906\u092a\u0915\u094b Apps Script \u092e\u0947 \u091c\u093e \u0915\u0930 File Menu \u0915\u0947 \u0938\u093e\u092e\u0928\u0947 \u0935\u093e\u0932\u0947 + \u092a\u0930 \u0915\u094d\u0932\u093f\u0915 \u0915\u0930\u0928\u093e \u0939\u0948\u0902 \u0914\u0930 \u090f\u0915 HTML File \u092c\u0928\u093e\u0928\u093e \u0939\u0948\u0902 \u091c\u093f\u0938\u0915\u093e \u0928\u093e\u092e \u0906\u092a\u0915\u094b index.html \u0930\u0916\u0928\u093e \u0939\u0948\u0902\u0964<\/p>\n\n\n\n<pre title=\"index.html\" class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n  &lt;head&gt;\n    &lt;base target=\"_top\"&gt;\n &lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\"\n    integrity=\"sha384-EVSTQN3\/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC\" crossorigin=\"anonymous\"&gt;\n  &lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/js\/bootstrap.bundle.min.js\"\n    integrity=\"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn\/tWtIaxVXM\" crossorigin=\"anonymous\"&gt;\n  &lt;\/script&gt;\n\n    &lt;script src=\"https:\/\/code.jquery.com\/jquery-3.7.0.min.js\"\n    integrity=\"sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07\/g=\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;\n\n&lt;style&gt;&lt;\/style&gt;\n\n\n&lt;\/head&gt;\n&lt;body class=\"p-2\" onload=\"getJSRead(); getInputs();\"&gt;\n  &lt;div class=\"p-1\"&gt; \n     &lt;span class=\"h4\"&gt;My Dynamic Form &amp; Table (Update Operation) &lt;\/span&gt;        \n      &lt;button type=\"button\" id=\"BtnCreate\" class=\"btn mycolor text-white \" onclick=\"myCreate()\" style=\"float:right\"&gt; (+) Add Record  &lt;\/button&gt;\n  &lt;\/div&gt;\n    &lt;div id=\"DivForm\"  class=\"formBackground\"&gt;\n    &lt;div class=\"card col-4 mx-auto mt-4 shadow rounded-4 rounded\" &gt;\n      &lt;div class=\"card-header mycolor text-white\"&gt; My Dynamic Form &lt;\/div&gt;\n      &lt;div class=\"card-body\"&gt;\n        &lt;form id=\"MyForm\"&gt;  &lt;\/form&gt;\n            &lt;div class=\"row justify-content-end px-2 \"&gt;\n            &lt;span id=\"SpanMsg\"&gt;&lt;\/span&gt;\n            &lt;button type=\"button\" id=\"BtnClose\" class=\"btn mycolor col-3 text-white\" onclick=\"formClose()\" style=\"margin-right:5px;\"  &gt; Close &lt;\/button&gt;\n          &lt;button type=\"button\" id=\"BtnSubmit\" class=\"btn mycolor col-3 text-white \" onclick=\"mySubmit()\" &gt; Submit &lt;\/button&gt;\n          &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;div id=\"DivTable\" class=\" mt-2 col-12 shadow rounded-4 rounded bg-light p-2 \" style=\"height:420px; overflow:auto\" &gt;\n        &lt;table class=\"table table-bordered \"&gt;\n            &lt;thead id=\"myTableHead\" class=\"mycolor text-white\"&gt;&lt;\/thead&gt;\n            &lt;tbody id=\"myTableBody\"&gt;&lt;\/tbody&gt;\n        &lt;\/table&gt;\n    &lt;\/div&gt;  \n&lt;script&gt;&lt;\/script&gt;\n   &lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Onload : <\/strong>\u091c\u0948\u0938\u0947 \u0939\u0940 Page Load \u0939\u094b\u0917\u093e \u0907\u0938 Event \u0938\u0947 Form design \u0914\u0930 Html Table \u092e\u0947 Data \u0926\u093f\u0916\u093e\u0908 \u0926\u0947\u0928\u0947 \u0932\u0917\u0947\u0917\u093e\u0964 <\/li>\n\n\n\n<li><strong>BtnCreate : <\/strong>\u0907\u0938 Button \u0938\u0947 \u091c\u092c \u0939\u092e New Entry \u0915\u0930\u0928\u093e \u091a\u093e\u0939\u0924\u0947 \u0939\u0948\u0902 \u0924\u092c \u092f\u0939 Blank Form Open \u0915\u0930 \u0926\u0947\u0917\u093e\u0964 <\/li>\n\n\n\n<li><strong>MyForm : <\/strong>\u092f\u0939 Form \u0939\u0948\u0902 \u0907\u0938 \u092e\u0947 Dynamic input Creation \u0939\u094b\u0917\u093e\u0964 <\/li>\n\n\n\n<li><strong>BtnClose :<\/strong> Form \u0915\u094b Close \u0915\u0930\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0907\u0938 Button \u0915\u094b \u092c\u0928\u093e\u092f\u093e \u0917\u092f\u093e \u0939\u0948\u0902\u0964 <\/li>\n\n\n\n<li><strong>BtnSubmit : <\/strong>\u0907\u0938 Button \u0938\u0947 From \u0915\u0947 Input \u092a\u0930 \u0939\u092e\u0928\u0947 \u091c\u094b Value Enter \u0915\u0940 \u0939\u0948\u0902 \u0935\u0939 Apps Script \u092a\u0930 \u092d\u0947\u091c \u0926\u0940 \u091c\u093e\u090f\u0917\u0940 \u091c\u093f\u0938\u0938\u0947 \u0915\u0940 Google Sheet \u092a\u0930 Store \u0915\u0930 \u0926\u093f\u092f\u093e \u091c\u093e\u090f \u0964 \u0928\u090f Record \u092e\u0947 \u092d\u0940 \u0907\u0938\u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u093f\u092f\u093e \u091c\u093e\u090f\u0917\u093e \u0914\u0930 \u091c\u092c \u0939\u092e Record \u0915\u094b edit \u0915\u0930\u0947\u0902\u0917\u0947 \u0924\u092c \u092d\u0940 \u0907\u0938\u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u093f\u092f\u093e \u091c\u093e\u090f\u0917\u093e\u0964 <\/li>\n\n\n\n<li><strong>DivTable : <\/strong>\u0907\u0938 Div \u092e\u0947 \u091f\u0947\u092c\u0932 Display \u0939\u094b\u0924\u0940 \u0939\u0948\u0902 \u0964 <\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"3-css-code-for-update-google-sheet-from-html-table\">3. CSS Code for Update Google Sheet From HTML Table<\/h2>\n\n\n\n<p>\u092f\u0939 CSS Code \u0939\u0948\u0902 \u092f\u0939 \u0906\u092a\u0915\u094b HTML Code \u092e\u0947 Style Tag \u092e\u0947 \u0932\u093f\u0916\u0928\u093e \u0939\u0948\u0902 \u0964 <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">body {  \n     background-color:  rgba(58, 103, 177, 30%); \/\/rgba(205, 180, 219, 30%); \n}\n.mycolor { \n     background-color: #3a67b1; \/\/#6d3b89;  \n}\n.formBackground {\n        position:fixed; \n        top:0;\n        display:none; \n        width:100%; \n        height:100%;\n        background-color: rgb(58, 103, 177, 39%);\n}     \n&lt;\/style&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"4-java-script-code-for-update-google-sheet-from-html-table\">4. JavaScript Code for Update Google Sheet From HTML Table<\/h2>\n\n\n\n<p>\u092f\u0939 JavaScript Code \u0939\u0948\u0902 \u092f\u0939 \u0906\u092a\u0915\u094b HTML Code \u092e\u0947 Script Tag \u092e\u0947 \u0932\u093f\u0916\u0928\u093e \u0939\u0948\u0902 \u0964 <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">\n    let index = 0;\n    function getInputs() {\n     \n    google.script.run.withSuccessHandler(function(data) {\n\n      let myHTML=\"\";   \n       $.each(data, function(key, value) {   \n        \n          let myLabel = value[1];\n          let myName  = value[0];\n          let myType  = value[2];\n\n           let myCode = `&lt;div class=\"form-group mb-3\"&gt;\n              &lt;label for=\"`+myName+`\"&gt;`+myLabel+`&lt;\/label&gt;\n              &lt;input type=\"`+myType+`\" class=\"form-control\" id=\"`+myName+`\" name=\"`+myName+`\"  placeholder=\"`+myLabel+`\"&gt;\n            &lt;\/div&gt;`;\n            myHTML = myHTML + myCode ;          \n      });\n      \n       $(\"#MyForm\").append(myHTML);  \n    }).getInputsList();\n  }\n\n  function mySubmit()  {\n\n       let myText = $(\"#MyForm\").serialize();\n       google.script.run.withSuccessHandler(function(data) { \n       let returnHTML = `&lt;div class=\"alert alert-success\" role=\"alert\"&gt; Success &lt;\/div&gt;`;\n           \/\/$(\"#MyForm\").html(returnHTML);\n           $(\"#MyForm input\").val('');\n           $(\"#SpanMsg\").html(returnHTML);\n           \n           \/\/$('#BtnSubmit').hide();\n\n          getJSRead(); \n          setTimeout(() =&gt; {   formClose() ;    }, \"2000\");        \n         }).getSubmit(myText,  index);  \n  }\n\n\n  function myCreate()  {\n     index = 0;                         \n      $('#SpanMsg').html(''); \n    $(\"#MyForm input\").val(''); \n    $('#DivForm').show();\n  }\n\n  function formClose() {\n      $('#DivForm').hide();\n  }\n  \n  function getJSRead() {\n         google.script.run.withSuccessHandler(function(data) {\n         \n      let thead = data[0];\n      let tbody = data[1];\n\n      let myRows=\"\";   \n       $.each(thead, function(key, row) {  \n          myRows  = myRows + \"&lt;tr&gt;\";\n          $.each(row, function(key, cell) {  \n              myRows  = myRows + \"&lt;th&gt;\" +  cell + \"&lt;\/th&gt;\";\n          });\n\n          myRows  = myRows + \"&lt;th style='width:80px'&gt;&lt;\/th&gt;\";  \n          myRows  = myRows + \"&lt;\/tr&gt;\";\n       });             \n       $(\"#myTableHead\").html(myRows);  \n       \n      myRows=\"\"; \n      let i = 1;  \n       $.each(tbody, function(key, row) {  \n        i++;\n          myRows  = myRows + \"&lt;tr&gt;\";\n          $.each(row, function(key, cell) {  \n              myRows  = myRows + \"&lt;td&gt;\" +  cell + \"&lt;\/td&gt;\";\n          });\n\n          \/\/(5.U)\n          let btnUpd = '&lt;button class=\"btn btn-outline-success btn-sm\" onclick=\"getJSOpen('+i+')\"&gt;Open&lt;\/button&gt;';\n          myRows  = myRows + \"&lt;td&gt;\"+btnUpd+\"&lt;\/td&gt;\";\n          myRows  = myRows + \"&lt;\/tr&gt;\";\n       });             \n       $(\"#myTableBody\").html(myRows);           \n    }).getASRead();\n  }\n\n  function getJSOpen(i)  {\n    index = i;\n      $('#SpanMsg').html('');  \n\n      google.script.run.withSuccessHandler(function(data) {\n          let colnm = data[0];\n          let row   = data[1][0];\n          let idx   = 0;\n          $.each(colnm, function(key, value) {                \n              colname  = value[0];\n              colvalue = row[idx];\n              idx++;\n              $('#'+colname).val(colvalue);\n          }); \n          $('#DivForm').show();           \n      }).getASOpen(i);\n  }<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>getInputs() : <\/strong>\u092f\u0939 Function Google Sheet \u0915\u0947 \u0906\u0927\u093e\u0930 \u092a\u0930 Form \u092e\u0947 Dynamic Inputs \u092c\u0928\u093e\u0928\u0947 \u0915\u093e \u0915\u093e\u0930\u094d\u092f \u0915\u0930\u0924\u093e \u0939\u0948\u0902\u0964 <\/li>\n\n\n\n<li><strong>myCreate() : <\/strong>\u092f\u0939 Function Form \u0915\u094b show \u0915\u0930\u0924\u093e \u0939\u0948\u0902 \u0914\u0930 \u0909\u0938\u092e\u0947 \u092f\u0926\u093f \u0915\u094b\u0908 \u0935\u0948\u0932\u094d\u092f\u0942 \u0939\u0948\u0902 \u0924\u094b value \u0915\u094b Blank \u0915\u0930\u0924\u093e \u0939\u0948\u0902 \u0964 <\/li>\n\n\n\n<li><strong>formClose() : <\/strong>\u092f\u0939 Function Form \u0915\u094b Hide \u0915\u0930\u0928\u0947 \u0915\u093e \u0915\u093e\u0930\u094d\u092f \u0915\u0930\u0924\u093e \u0939\u0948\u0902\u0964 <\/li>\n\n\n\n<li><strong>getJSRead() :<\/strong> \u092f\u0939 Function Google set \u0938\u092d\u0940 Data \u0915\u094b HTML Table \u092e\u0947 Display \u0915\u0930\u0928\u0947 \u0915\u093e \u0915\u093e\u0930\u094d\u092f \u0915\u0930\u0924\u093e \u0939\u0948\u0902\u0964 <\/li>\n\n\n\n<li><strong>getJSOpen() :<\/strong> \u091c\u092c \u0939\u092e \u0915\u093f\u0938\u0940 Row \u0915\u094b Edit \u0915\u0930\u0924\u0947 \u0939\u0948\u0902 \u0924\u092c \u0939\u092e \u0907\u0938 Function \u0915\u094b call \u0915\u0930\u0924\u0947 \u0939\u0948\u0902 \u0907\u0938\u092e\u0947 index pass \u0915\u0930 \u0939\u092e \u0909\u0938 Row \u0915\u0947 data \u0915\u094b Form \u092a\u0930 Open \u0915\u0930\u0924\u0947 \u0939\u0948\u0902\u0964 <\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"5-apps-script-code-for-update-google-sheet-from-html-table\">5. Apps Script Code for Update Google Sheet From HTML Table<\/h2>\n\n\n\n<p>\u0905\u092c \u092f\u0939\u093e\u0901 \u0938\u0947 Apps Script \u0915\u0947 Code \u0915\u0940 \u0936\u0941\u0930\u0941\u0906\u0924 \u0939\u094b\u0924\u0940 \u0939\u0948\u0902 <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">let MySheets  = SpreadsheetApp.getActiveSpreadsheet();\nlet FormSheet = MySheets.getSheetByName(\"Form\");  \nlet EmpSheet  = MySheets.getSheetByName(\"Employee\");  \n\nfunction doGet(e) {\n  return HtmlService.createTemplateFromFile('index').evaluate();\n}\n\nfunction getInputsList() {\n  let table = FormSheet.getRange(\"A2:C\").getValues().filter(r =&gt; r.every(Boolean)); \n  return table;\n} \n\nfunction getSubmit(data, index) {\n  var myAry = [];\n  const pair = data.split(\"&amp;\");\n\n  pair.forEach(function(value) {\n        const val = value.split(\"=\");\n        let finalValue = decodeURIComponent(val[1]);\n           myAry.push(finalValue);\n  });\n\n  if (index == 0) {     \n    EmpSheet.appendRow(myAry) ;  \n  }\n  else { \n      let cols = EmpSheet.getLastColumn();\n      EmpSheet.getRange(index, 1, 1, cols).setValues([myAry]);\n  }\n}\n\nfunction getASRead() {\n  let cols = EmpSheet.getLastColumn();\n  let rows = EmpSheet.getLastRow() -1;\n\n  let tHead = EmpSheet.getRange(1,1, 1,cols).getValues();\n  let tBody = EmpSheet.getRange(2,1, rows,cols).getValues();\n  \n  return [tHead, tBody] ;\n} \n\nfunction getASOpen(i) {  \n  let cols = EmpSheet.getLastColumn();\n  let colnm = FormSheet.getRange(\"A2:C\").getValues().filter(r =&gt; r.every(Boolean)); \n  let data  = EmpSheet.getRange(i, 1, 1, cols).getValues();\n  return [colnm, data];\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>doGet() :<\/strong> \u0907\u0938 Function \u0938\u0947 \u0939\u092e\u0928\u0947 Index Page \u0915\u094b \u0938\u092c\u0938\u0947 \u092a\u0939\u0932\u0947 Display \u0915\u093f\u092f\u093e \u0939\u0948\u0902\u0964 <\/li>\n\n\n\n<li><strong>getInputsList() : <\/strong>\u0907\u0938 Function \u0938\u0947 \u0939\u092e\u0928\u0947 Google Sheet \u0915\u0947 data \u0915\u094b JavaScript \u092a\u0930 Return \u0915\u093f\u092f\u093e \u0939\u0948\u0902 \u091c\u093f\u0938\u0938\u0947 \u0915\u0940 \u0939\u092e Form \u0915\u0947 Input \u092c\u0928\u093e \u0938\u0915\u0947 \u0964 <\/li>\n\n\n\n<li><strong>getSubmit() :<\/strong> \u0907\u0938 Function \u0938\u0947 \u0939\u092e Data \u0915\u094b Insert \/ Update  \u0915\u0930\u0924\u0947 \u0939\u0948\u0902 \u0964 \u0907\u0938\u092e\u0947 \u0939\u092e Form \u0915\u0947 data \u0915\u094b Post \u0915\u0930 Apps Script \u092e\u0947 Receive \u0915\u0930\u0924\u0947 \u0939\u0948\u0902 \u0914\u0930 Index \u0915\u0947 \u0906\u0927\u093e\u0930 \u092a\u0930 Google Sheet \u092e\u0947 Row \u0915\u094b update \/ Append \u0915\u0930\u0924\u0947 \u0939\u0948\u0902 \u0964  <\/li>\n\n\n\n<li><strong>getASRead() : <\/strong>\u0907\u0938 Function \u0938\u0947 \u0939\u092e Google Sheet \u0915\u093e data \u0915\u094b HTML Table \u092a\u0930 Retrieve \u0915\u0930\u0924\u0947 \u0939\u0948\u0902\u0964 \u0924\u093e\u0915\u093f \u0938\u092d\u0940 Rows \u0914\u0930 Columns Dynamically \u0926\u093f\u0916\u093e \u0938\u0915\u0947\u0964 <\/li>\n\n\n\n<li><strong>getASOpen() :<\/strong> \u091c\u092c \u0939\u092e \u0915\u093f\u0938\u0940 Record \u0915\u094b open \u0915\u0930\u0924\u0947 \u0939\u0948\u0902 \u0924\u092c \u0907\u0938 Function \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930\u0924\u0947 \u0939\u0948\u0902 \u0907\u0938\u092e\u0947 \u0939\u092e Index \u092a\u093e\u0938 \u0915\u0930 \u090f\u0915 Single Row \u0915\u0947 data \u0915\u094b Form \u092a\u0930 Open \u0915\u0930\u0924\u0947 \u0939\u0948\u0902 \u0924\u093e\u0915\u093f \u0915\u0941\u091b \u092d\u0940 change \u0915\u0930 \u0909\u0938\u0947 Update \u0915\u0930 \u0938\u0915\u0947\u0964 <\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"6-project-deployment\">6. Project Deployment<\/h2>\n\n\n\n<p>\u0907\u0938\u0915\u0947 \u092c\u093e\u0926 \u0906\u092a\u0915\u094b Project \u0915\u094b deploy \u0915\u0930\u0928\u093e \u0939\u0948\u0902 \u0914\u0930 \u091c\u094b Deploy \u0915\u0930\u0928\u0947 \u0915\u0947 \u092c\u093e\u0926 \u0932\u093f\u0902\u0915 \u0906\u090f\u0917\u0940 \u0909\u0938\u0947 \u092a\u094d\u0930\u0949\u091c\u0947\u0915\u094d\u091f \u0915\u094b Run \u0915\u0930\u0928\u093e \u0939\u0948 \u0964 \u092f\u0926\u093f \u0906\u092a\u0915\u094b Deploy \u0915\u0930\u0928\u093e \u0938\u0940\u0916\u0928\u093e \u0939\u0948\u0902 \u0924\u094b \u0906\u092a \u0928\u093f\u092e\u094d\u0928 Link \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u0930\u0947 \u0964<\/p>\n\n\n\n<p><a href=\"https:\/\/selfimagination.in\/tips\/deploying-apps-script-as-a-web-api\/\">How to Deploy Web API<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"7-project-execution\">7. Project Execution <\/h2>\n\n\n\n<p>\u0905\u092c \u0939\u092e \u0907\u0938 Project (Update Google Sheet From HTML Table) \u0915\u094b Execute \u0915\u0930 \u0926\u0947\u0916\u0947\u0902\u0917\u0947 \u0915\u0940 \u0915\u094d\u092f\u093e \u0930\u093f\u091c\u0932\u094d\u091f \u0906 \u0930\u0939\u093e \u0939\u0948\u0902 \u0964<\/p>\n\n\n\n<p>\u091c\u0948\u0938\u0947 \u0939\u0940 \u0906\u092a \u0932\u093f\u0902\u0915 \u092a\u0930 \u0915\u094d\u0932\u093f\u0915 \u0915\u0930\u0947\u0902\u0917\u0947 \u0915\u0941\u091b \u0907\u0938 \u0924\u0930\u0939 \u0938\u0947 \u0938\u094d\u0915\u094d\u0930\u0940\u0928 \u0926\u093f\u0916\u093e\u0908 \u0926\u0947\u0917\u0940 \u092f\u0939 \u092a\u0942\u0930\u0940 \u0924\u0930\u0939 \u0938\u0947 Dynamic \u0939\u0948\u0902 \u0907\u0938\u092e\u0947 \u091c\u093f\u0924\u0928\u093e \u092d\u0940 data Display \u0939\u094b \u0930\u0939\u093e \u0939\u0948\u0902 \u0938\u092d\u0940 Google Sheet \u0915\u0947 Data \u0915\u0947 \u0906\u0927\u093e\u0930 \u092a\u0930 display \u0939\u094b \u0930\u0939\u093e \u0939\u0948\u0902 \u0964<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"518\" height=\"425\" src=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2024\/01\/image-3.png?resize=518%2C425&#038;ssl=1\" alt=\"Update Google Sheet From HTML Table\" class=\"wp-image-12101\" style=\"width:347px;height:auto\" srcset=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2024\/01\/image-3.png?w=518&amp;ssl=1 518w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2024\/01\/image-3.png?resize=300%2C246&amp;ssl=1 300w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2024\/01\/image-3.png?resize=150%2C123&amp;ssl=1 150w\" sizes=\"auto, (max-width: 518px) 100vw, 518px\" \/><\/figure>\n<\/div>\n\n\n<p>\u091c\u092c \u0906\u092a \u0907\u0938\u092e\u0947 Open Button \u092a\u0930 Click \u0915\u0930\u0947\u0902\u0917\u0947 \u0924\u092c \u0906\u092a\u0915\u094b \u0928\u093f\u092e\u094d\u0928 Form Open \u0939\u094b\u0917\u093e \u091c\u093f\u0938\u092e\u0947 \u0915\u0940 Selected Row \u0915\u093e Data Fill \u0939\u094b \u091c\u093e\u090f\u0917\u093e\u0964 <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"491\" height=\"514\" src=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2024\/01\/image-4.png?resize=491%2C514&#038;ssl=1\" alt=\"Display Google Sheet data to HTML Form\" class=\"wp-image-12102\" style=\"width:369px;height:auto\" srcset=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2024\/01\/image-4.png?w=491&amp;ssl=1 491w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2024\/01\/image-4.png?resize=287%2C300&amp;ssl=1 287w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2024\/01\/image-4.png?resize=150%2C157&amp;ssl=1 150w\" sizes=\"auto, (max-width: 491px) 100vw, 491px\" \/><\/figure>\n<\/div>\n\n\n<p>\u0906\u0936\u093e \u0939\u0948\u0902 \u092e\u0941\u091d\u0947 \u0915\u0940 \u0906\u092a\u0915\u094b \u0915\u093f\u0938 \u0924\u0930\u0939 \u0938\u0947 Google Sheet \u0915\u0947 Data \u0915\u094b update \u0915\u0930 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902 \u0938\u092e\u091d \u092e\u0947 \u0906 \u0917\u092f\u093e \u0939\u094b\u0917\u093e\u0964 \u092b\u093f\u0930 \u092d\u0940 \u0906\u092a\u0915\u094b \u0915\u094b\u0908 \u092d\u0940 Doubt \u0939\u094b \u0924\u094b \u0906\u092a \u092e\u0941\u091d\u0947 \u0928\u093f\u0903\u0938\u0902\u0915\u094b\u091a Comment \u0915\u0930 \u0938\u0915\u0924\u0947 \u0939\u0948\u0902 \u0964<\/p>\n\n\n\n<p>\u0906\u092a\u0915\u094b \u092f\u0939 Article (Update Google Sheet From HTML Table) \u0915\u0948\u0938\u093e \u0932\u0917\u093e \u092c\u0924\u093e\u0928\u093e \u0928 \u092d\u0942\u0932\u0947 <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"\u0939\u092e\u093e\u0930\u0947-\u0905\u0928\u094d\u092f-\u0906\u0930\u094d\u091f\u093f\u0915\u0932\"><strong>\u0939\u092e\u093e\u0930\u0947 \u0905\u0928\u094d\u092f \u0906\u0930\u094d\u091f\u093f\u0915\u0932<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/selfimagination.in\/tips\/mysql-function\/\">MySQL Function<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/mysql-stored-procedure\/\">MySQL Stored Procedure<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/get-post-method\/\">PHP Get \/Post Method \u0915\u0947 \u092c\u093e\u0930\u0947 \u092e\u0947\u0902 \u091c\u093e\u0928\u0947<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/php-math-function\/\">PHP Math Function \u0915\u0947 \u092c\u093e\u0930\u0947 \u092e\u0947\u0902 \u091c\u093e\u0928\u0947<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/learn-cpp-from-c\/\">C \u0938\u0947 C ++ \u0938\u0940\u0916\u0947 \u0938\u0930\u0932 \u0936\u092c\u094d\u0926\u094b\u0902 \u092e\u0947\u0902<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/php-variables\/\">PHP Variable \u0915\u0947 \u092c\u093e\u0930\u0947 \u092e\u0947\u0902 \u091c\u093e\u0928\u0947<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/arduino-control-structure\/\">Arduino Control Structure<\/a>&nbsp;<\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/c-union\/\">Union in C<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/c-pointer\/\">Declaration of Pointer in C<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/search-jquery\/\">jQuery Search Filter<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/mysql-table-create-alter-drop\/\">MySQL Create Table | Alter Table | Drop Table<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/api-using-node-react-express-mysql\/\">API Using NODE REACT EXPRESS MYSQL SEQUELIZE (For Backend OR Server Side)<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/selfimagination.in\/tips\/cpanel\/\">CPANEL In Hindi<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Learn How to Update Google Sheet From HTML Table, enabling interactive selection of rows that open in a form for editing. Follow this step-by-step tutorial to seamlessly update records back to Google Sheet upon form submission. Enhance your web development skills and streamline data management effortlessly. \u0907\u0938 Article \u092e\u0947 \u0939\u092e\u0928\u0947 \u091c\u094b \u092a\u093f\u091b\u0932\u0947 Article \u092e\u0947 Create [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":12260,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[28],"tags":[],"class_list":["post-12100","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-google-apps-script"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2024\/02\/Dynamic-form-update.jpg?fit=1280%2C720&ssl=1","_links":{"self":[{"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/posts\/12100","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/comments?post=12100"}],"version-history":[{"count":96,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/posts\/12100\/revisions"}],"predecessor-version":[{"id":12309,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/posts\/12100\/revisions\/12309"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/media\/12260"}],"wp:attachment":[{"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/media?parent=12100"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/categories?post=12100"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/tags?post=12100"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}