{"id":12096,"date":"2024-02-09T19:48:46","date_gmt":"2024-02-09T14:18:46","guid":{"rendered":"https:\/\/selfimagination.in\/tips\/?p=12096"},"modified":"2024-02-09T19:48:48","modified_gmt":"2024-02-09T14:18:48","slug":"read-dynamic-google-sheet-data-to-html","status":"publish","type":"post","link":"https:\/\/selfimagination.in\/tips\/read-dynamic-google-sheet-data-to-html\/","title":{"rendered":"Read Dynamic Google Sheet Data to HTML Table using Apps Script (CRUD)"},"content":{"rendered":"\n<p>Read Dynamic Google Sheet Data, Explore how to seamlessly display Google Sheet data into an HTML table using Apps Script &amp; JavaScript, with a unique feature\u2014no need to fix columns! With every column addition in your Google Sheet, the HTML table auto-updates upon page refresh. This tutorial provides a step-by-step guide on achieving dynamic data representation. Witness the magic of auto-updating columns effortlessly!<\/p>\n\n\n\n<p>\u0907\u0938 \u0906\u0930\u094d\u091f\u093f\u0915\u0932 (Read Dynamic Google Sheet Data) \u092e\u0947 \u0939\u092e\u0928\u0947 Google Sheet \u0915\u0947 Data \u0915\u094b HTML Table \u092e\u0947 \u0926\u093f\u0916\u093e\u092f\u093e \u0939\u0948\u0902 \u0907\u0938\u0947 \u0939\u092e Dynamic Read \u0907\u0938\u0932\u093f\u090f \u092c\u094b\u0932 \u0930\u0939\u0947 \u0939\u0948 \u0915\u0940 \u091c\u0940\u0924\u0928\u0947 \u092d\u0940 Columns Display \u0939\u094b \u0930\u0939\u0947 \u0939\u0948\u0902 \u0909\u0928\u0915\u0947 \u0932\u093f\u090f \u0906\u092a\u0915\u094b \u092a\u094d\u0930\u0924\u094d\u092f\u0947\u0915 column \u0915\u0947 \u0932\u093f\u090f Separate Coding \u0915\u0930\u0928\u0947 \u0915\u0940 \u091c\u0930\u0942\u0930\u0924 \u0928\u0939\u0940\u0902 \u0939\u0948\u0902 , \u091c\u0948\u0938\u0947 \u0939\u0940 Google Sheet \u092e\u0947 Columns add \u0915\u0930\u0947\u0902\u0917\u0947 \u0914\u0930 page \u0915\u094b Refresh \u0915\u0930\u0947\u0902\u0917\u0947 \u0924\u092c \u0906\u092a\u0915\u094b \u091c\u0940\u0924\u0928\u0947 \u092d\u0940 Columns Google Sheet \u092e\u0947 \u0939\u0948\u0902 \u0909\u0924\u0928\u0947 \u0926\u093f\u0916\u093e\u0908 \u0926\u0947\u0928\u0947 \u0932\u0917\u0947\u0902\u0917\u0947\u0964 <\/p>\n\n\n\n<p>\u0907\u0938\u0915\u0947 \u092a\u0939\u0932\u0947 \u0935\u093e\u0932\u0947 Article \u092e\u0947 \u0939\u092e\u0928\u0947 Dynamic Create \u0915\u093e Work \u0915\u093f\u092f\u093e \u0925\u093e \u0907\u0938\u0915\u093e \u0932\u093f\u0902\u0915 \u0928\u093f\u092e\u094d\u0928 \u092a\u094d\u0930\u0915\u093e\u0930 \u0939\u0948\u0902 \u0964 <\/p>\n\n\n\n<p><a href=\"https:\/\/selfimagination.in\/tips\/create-dynamic-html-forms-apps-script-crud\/\">Create Dynamic HTML Form Using Google Apps Script<\/a><\/p>\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-for-read-dynamic-data\">1. Google Sheet for Read Dynamic Data<\/a><\/li><li><a href=\"#2-html-code-for-read-dynamic-google-sheet-data\">2. HTML Code for Read Dynamic Google Sheet Data<\/a><\/li><li><a href=\"#3-css-code-for-read-dynamic-google-sheet-data\">3. CSS Code for Read Dynamic Google Sheet Data<\/a><\/li><li><a href=\"#4-java-script-code-for-read-dynamic-google-sheet-data\">4. JavaScript Code for Read Dynamic Google Sheet Data<\/a><\/li><li><a href=\"#5-apps-script-code-for-read-dynamic-google-sheet-data\">5. Apps Script Code for Read Dynamic Google Sheet Data<\/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=\"#project-merge-create-read\">Project Merge (Create &amp; Read)<\/a><ul><li><a href=\"#html-changes\">HTML Changes <\/a><\/li><li><a href=\"#css-changes\">CSS Changes <\/a><\/li><li><a href=\"#js-changes\">JS Changes <\/a><\/li><\/ul><\/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\udcf02. CRUD : Dynamic Google Sheet Data to HTML Table using Apps Script\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/qKnM0CAfyuU?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-for-read-dynamic-data\">1. Google Sheet for Read Dynamic Data<\/h2>\n\n\n\n<p>\u092f\u0926\u093f \u0906\u092a CRUD Series \u0915\u094b Continue \u0915\u0930 \u0930\u0939\u0947 \u0939\u0948\u0902 \u0924\u094b \u092f\u0939 Google Sheet \u0906\u092a\u0915\u0947 \u092a\u093e\u0938 \u092a\u0939\u0932\u0947 \u0938\u0947 \u0939\u094b\u0917\u0940 , \u0914\u0930 \u092f\u0926\u093f \u0906\u092a \u0915\u0947\u0935\u0932 Read \u0939\u0940 \u0938\u092e\u091d \u0930\u0939\u0947 \u0939\u0948\u0902 \u0924\u094b \u0906\u092a\u0915\u094b \u092f\u0939 Google Sheet \u092c\u0928\u093e \u0915\u0930 \u0909\u0938\u092e\u0947 Data Enter \u0915\u0930\u0928\u093e \u0939\u094b\u0917\u093e\u0964 \u0907\u0938 Sheet \u0915\u093e \u0928\u093e\u092e \u0906\u092a\u0915\u094b Employee \u0930\u0916\u0928\u093e \u0939\u0948\u0902\u0964 \u0906\u092a \u091c\u093f\u0924\u0928\u0940 \u092d\u0940 \u091a\u093e\u0939\u0947 \u0909\u0924\u0928\u0947 Columns \u092c\u0928\u093e \u0938\u0915\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=\"457\" height=\"396\" src=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2024\/02\/image-3.png?resize=457%2C396&#038;ssl=1\" alt=\"Read Dynamic Google Sheet Data\" class=\"wp-image-12160\" style=\"width:299px;height:auto\" srcset=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2024\/02\/image-3.png?w=457&amp;ssl=1 457w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2024\/02\/image-3.png?resize=300%2C260&amp;ssl=1 300w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2024\/02\/image-3.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-read-dynamic-google-sheet-data\">2. HTML Code for Read Dynamic Google Sheet Data<\/h2>\n\n\n\n<p>\u0905\u092c \u0939\u092e\u0947 Apps Script \u092e\u0947 \u090f\u0915 HTML Page \u092c\u0928\u093e\u0928\u093e \u0939\u094b\u0917\u093e\u0964 \u0907\u0938\u0947 \u092c\u0928\u093e\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f 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 \u092f\u0926\u093f \u0906\u092a CRUD Series \u0915\u094b \u0939\u0940 Continue \u0915\u0930 \u0930\u0939\u0947 \u0939\u0948\u0902 \u0924\u094b \u0906\u092a\u0915\u094b Last \u092e\u0947 \u0915\u0941\u091b Changes \u0926\u093f\u090f \u0939\u0948\u0902 \u0935\u0939 \u0915\u0930\u0928\u093e \u0939\u094b\u0902\u0917\u0947\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&lt;\/head&gt;\n  &lt;!-- 2.Add FOR (R)--&gt;\n &lt;body class=\"p-2\" onload=\"getJSRead(); getInputs();\"&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; <\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"3-css-code-for-read-dynamic-google-sheet-data\">3. CSS Code for Read Dynamic Google Sheet Data<\/h2>\n\n\n\n<p>\u0909\u092a\u0930\u094b\u0915\u094d\u0924 HTML \u092e\u0947 \u091c\u0939\u093e\u0902 \u092a\u0930 Style tag \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u093f\u092f\u093e \u0939\u0948\u0902 \u0935\u0939\u093e\u0901 \u092a\u0930 \u0906\u092a \u092f\u0939 Code Paste \u0915\u0930 \u0938\u0915\u0924\u0947 \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 }<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"4-java-script-code-for-read-dynamic-google-sheet-data\">4. JavaScript Code for Read Dynamic Google Sheet Data<\/h2>\n\n\n\n<p>\u0909\u092a\u0930\u094b\u0915\u094d\u0924 HTML \u092e\u0947 \u091c\u0939\u093e\u0902 \u092a\u0930 Script Tag \u0932\u0917\u093e \u0939\u0948\u0902 Last \u092e\u0947 \u0935\u0939\u093e\u0901 \u092a\u0930 \u0906\u092a \u0928\u093f\u092e\u094d\u0928 Code Paste \u0915\u0930 \u0938\u0915\u0924\u0947 \u0939\u0948 , \u0907\u0938 Script \u092e\u0947 \u0939\u092e\u0928\u0947 getJSRead() JavaScript Function \u092c\u0928\u093e\u092f\u093e \u0939\u0948\u0902 \u091c\u094b \u0915\u0940 Apps Script \u0915\u0947 getASRead() function \u0938\u0947 Communicate \u0915\u0930 data \u0915\u094b myTableBody \u092a\u0930 display \u0915\u0930\u0924\u093e \u0939\u0948\u0902\u0964 <\/p>\n\n\n\n<p>\u0907\u0938 Function \u0938\u0947 Google Sheet \u092e\u0947 \u091c\u0940\u0924\u0928\u0947 \u092d\u0940 Columns \u0939\u094b\u0924\u0947 \u0939\u0948\u0902 \u0938\u092d\u0940 \u0906 \u091c\u093e\u0924\u0947 \u0939\u0948\u0902 \u0914\u0930 \u091c\u094b \u0909\u0928\u0915\u0940 Heading \u0939\u0948\u0902 \u0935\u0939 \u092d\u0940 as it is \u0926\u093f\u0916\u093e\u0908 \u0926\u0947\u0928\u0947 \u0932\u0917\u0924\u0940 \u0939\u0948\u0902 \u0964 Heading \u0915\u094b Display \u0915\u0930\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f myTableHead \u0915\u093e \u0909\u092a\u092f\u094b\u0917 \u0915\u093f\u092f\u093e \u0939\u0948\u0902 \u0964 <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">  function getJSRead() {\n       \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          myRows  = myRows + \"&lt;\/tr&gt;\";\n       });             \n       $(\"#myTableHead\").html(myRows);  \n\n       \n      myRows=\"\";   \n       $.each(tbody, function(key, row) {  \n          myRows  = myRows + \"&lt;tr&gt;\";\n          $.each(row, function(key, cell) {  \n              myRows  = myRows + \"&lt;td&gt;\" +  cell + \"&lt;\/td&gt;\";\n          });\n          myRows  = myRows + \"&lt;\/tr&gt;\";\n       });             \n       $(\"#myTableBody\").html(myRows);           \n\n    }).getASRead();\n  }<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"5-apps-script-code-for-read-dynamic-google-sheet-data\">5. Apps Script Code for Read Dynamic Google Sheet Data<\/h2>\n\n\n\n<p>\u0905\u092c \u092f\u0939\u093e\u0901 \u0938\u0947 Apps Script \u0915\u093e Code \u0936\u0941\u0930\u0942 \u0939\u094b\u0924\u093e \u0939\u0948\u0902\u0964 \u0907\u0938\u0947 \u0906\u092a\u0915\u094b code.gs \u092b\u093e\u0907\u0932 \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\">let MySheets  = SpreadsheetApp.getActiveSpreadsheet();\nlet EmpSheet  = MySheets.getSheetByName(\"Employee\");  \n\nfunction doGet(e) {\n  return HtmlService.createTemplateFromFile('index').evaluate();\n}\n\nfunction getASRead() {\n  let cols = EmpSheet.getLastColumn();\n  let rows = EmpSheet.getLastRow() -1;\n  let tHead = EmpSheet.getRange(1,1, 1,cols).getValues();\n  let tBody = EmpSheet.getRange(2,1, rows,cols).getValues();\n  return [tHead, tBody] ;\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 \u0938\u092c\u0938\u0947 \u092a\u0939\u0932\u0947 Index.html \u0915\u094b display \u0915\u0930\u0935\u093e\u092f\u093e \u0939\u0948\u0902\u0964 <\/li>\n\n\n\n<li><strong>getASRead() :<\/strong> \u0907\u0938 function \u0915\u094b JavaScript \u0915\u0947 \u0926\u094d\u0935\u093e\u0930\u093e Call \u0915\u093f\u092f\u093e \u091c\u093e\u0924\u093e \u0939\u0948\u0902 \u0964 \u092f\u0939 tHead \u0914\u0930 tBody \u0915\u094b Return \u0915\u0930\u0924\u093e \u0939\u0948\u0902 \u0964 \u0907\u0928\u094d\u0939\u0947 \u0905\u0932\u0917 \u0905\u0932\u0917 \u0907\u0938\u0932\u093f\u090f Return \u0915\u093f\u092f\u093e \u0939\u0948\u0902 \u0915\u0940 \u0939\u092e \u0906\u0938\u093e\u0928\u0940 \u0938\u0947 th \u0914\u0930 td \u092e\u0947 data \u0938\u0947\u091f \u0915\u0930\u093e \u0938\u0915\u0947 \u0964 <\/li>\n<\/ul>\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 Project \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=\"640\" height=\"315\" src=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2024\/02\/image-2.png?resize=640%2C315&#038;ssl=1\" alt=\"\" class=\"wp-image-12156\" style=\"width:438px;height:auto\" srcset=\"https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2024\/02\/image-2.png?w=763&amp;ssl=1 763w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2024\/02\/image-2.png?resize=300%2C148&amp;ssl=1 300w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2024\/02\/image-2.png?resize=60%2C31&amp;ssl=1 60w, https:\/\/i0.wp.com\/selfimagination.in\/tips\/wp-content\/uploads\/2024\/02\/image-2.png?resize=150%2C74&amp;ssl=1 150w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"project-merge-create-read\">Project Merge (Create &amp; Read)<\/h2>\n\n\n\n<p>\u092a\u093f\u091b\u0932\u0947 Article \u092e\u0947 \u0939\u092e\u0928\u0947 Create \u0915\u0930\u0928\u093e \u0938\u0940\u0916\u093e \u0925\u093e \u0907\u0938 Article (Read Dynamic Google Sheet Data)  \u092e\u0947 \u0939\u092e\u0928\u0947 Read \u0915\u0930\u0928\u093e \u0938\u0940\u0916\u093e, \u092f\u0926\u093f \u0906\u092a \u091a\u093e\u0939\u0924\u0947 \u0939\u0948\u0902 \u0915\u0940 \u0926\u094b\u0928\u094b\u0902 \u0939\u0940 Project \u0915\u094b Merge \u0915\u093f\u092f\u093e \u091c\u093e\u090f \u0924\u094b \u0906\u092a\u0915\u094b Create \u0935\u093e\u0932\u0947 Project \u092e\u0947 \u0915\u0941\u091b \u091a\u0947\u0902\u091c \u0915\u0930\u093e \u0939\u094b\u0902\u0917\u0947\u0964 <\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"html-changes\">HTML Changes <\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;!-- 1. --&gt;\n&lt;body class=\"p-2\" onload=\"getJSRead(); getInputs();\"&gt;\n\n&lt;!-- 2. --&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\n&lt;!-- 3. --&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\n      &lt;div class=\"card-header mycolor text-white\"&gt;\n        My Dynamic Form\n      &lt;\/div&gt;\n\n       &lt;div class=\"card-body\"&gt;\n        &lt;form id=\"MyForm\"&gt;\n\n        &lt;\/form&gt;\n          &lt;div class=\"row justify-content-end px-2 \"&gt;\n\n            \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\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   \n    &lt;\/div&gt;\n    &lt;\/div&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>1. \u092f\u0939\u093e \u092a\u0930 \u0906\u092a\u0915\u094b \u091c\u094b \u092d\u0940 Function Load \u0939\u094b\u0928\u0947 \u092a\u0930 Call \u0915\u0930\u0928\u093e \u0939\u0948\u0902 \u0909\u0928\u0915\u094b \u0932\u093f\u0916\u0928\u093e \u0939\u0948 \u0964 \u0939\u092e\u0947\u0902 \u092f\u0939\u093e\u0901 \u092a\u0930 Read \u0914\u0930 Input \u0926\u094b\u0928\u094b\u0902 \u0915\u0940 function \u0915\u094b call \u0907\u0938\u0932\u093f\u090f \u0915\u093f\u092f\u093e \u0939\u0948\u0902 \u0924\u093e\u0915\u093f \u0926\u094b\u0928\u094b\u0902 \u0939\u0940 Load \u0939\u094b \u0938\u0915\u0947, \u0938\u092d\u0940 \u092d\u0940 Display \u0915\u0930\u0928\u093e \u0939\u094b\u0902\u0917\u0947 \u0924\u092c Display \u0915\u0930 \u0932\u0947\u0902\u0917\u0947\u0964 <\/li>\n\n\n\n<li>2. \u092a\u093f\u091b\u0932\u0947 \u0935\u093e\u0932\u0947 Article \u092e\u0947 \u0939\u092e\u0928\u0947 Main page \u092a\u0930 \u0939\u0940 Form \u0926\u093f\u0916\u093e\u092f\u093e \u0925\u093e \u0932\u0947\u0915\u093f\u0928 \u091c\u092c \u0939\u0948\u0902 Table \u092e\u0947 data \u0926\u093f\u0916\u093e \u0930\u0939\u0947 \u0939\u0948\u0902 \u0924\u094b \u0939\u092e\u0947 Form \u0915\u094b hide \u0915\u0930\u0928\u093e \u0939\u094b\u0917\u093e , \u0914\u0930 form \u0915\u094b \u0926\u093f\u0916\u093e\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0939\u092e\u0947\u0902 \u090f\u0915 Button \u0926\u0947\u0928\u093e \u0939\u094b\u0917\u093e \u091c\u093f\u0938\u0938\u0947 \u0915\u0940 Form Show \u0939\u094b \u0938\u0915\u0947\u0964 <\/li>\n\n\n\n<li>3. \u0905\u092c \u0939\u092e Form \u0915\u0947 Code \u0915\u094b \u090f\u0915 Div DivForm \u092e\u0947 \u0932\u093f\u0916\u0947\u0902\u0917\u0947 \u0924\u093e\u0915\u093f \u0939\u092e \u0909\u0938\u0947 Hide Show \u0915\u0930 \u0938\u0915\u0947 \u0964 \u0907\u0938 Form \u0915\u0947 \u0938\u093e\u0925 \u0939\u092e Close Button \u092d\u0940 \u092c\u0928\u093e\u090f\u0902\u0917\u0947 \u0924\u093e\u0915\u093f Form \u0915\u094b Hide \u0915\u0930 \u0938\u0915\u0947\u0964 <\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"css-changes\">CSS Changes <\/h3>\n\n\n\n<p>Css \u092e\u0947 \u0939\u092e\u0947 \u090f\u0915 Class \u0914\u0930 \u092c\u0928\u093e\u0928\u0940 \u0939\u094b\u0917\u0940 \u0924\u093e\u0915\u093f \u0939\u092e Form \u0915\u0940 Position \u0915\u094b Fix \u0915\u0930 \u0938\u0915\u0947 \u0935\u0939 \u092a\u0939\u0932\u0947 \u0938\u0947 \u092e\u094b\u091c\u0942\u0926 Content \u0915\u0947 \u090a\u092a\u0930 \u0939\u0940 display \u0939\u094b \u0938\u0915\u0947 \u0964 <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">      .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     <\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"js-changes\">JS Changes <\/h3>\n\n\n\n<p>Javascript \u092e\u0947 \u0939\u092e\u0947 \u0926\u094b Function \u0914\u0930 \u092c\u0928\u093e\u0928\u093e \u0939\u094b\u0902\u0917\u0947 \u0964 <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>1. myCreate() :<\/strong> Form \u0915\u094b Show \u0915\u0930\u0928\u0947 \u0915\u0947\u0932\u093f\u090f <\/li>\n\n\n\n<li><strong>2. formClose() :<\/strong> Form \u0915\u094b Hide \u0915\u0930\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u0964 <\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">  function myCreate()  {\n    $('#DivForm').show();\n  }\n\n  function formClose() {\n      $('#DivForm').hide();\n  }<\/code><\/pre>\n\n\n\n<p>\u0907\u0924\u0928\u093e \u0915\u0930\u0928\u0947 \u0915\u0947  \u092c\u093e\u0926 \u0906\u092a Project \u0926\u094b Deploy \u0915\u0930\u0947\u0902\u0917\u0947 \u0914\u0930 Execute \u0915\u0930\u0947\u0902\u0917\u0947 \u0924\u092c \u0906\u092a\u0915\u094b \u091f\u0947\u092c\u0932 \u0915\u0947 Top Right Corner \u092a\u0930 (+) Add Record Button \u092d\u0940 \u0926\u093f\u0916\u093e\u0908 \u0926\u0947\u0917\u093e\u0964 <\/p>\n\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 Dynamic Data Google Sheet \u0938\u0947 Read \u0915\u0930 HTML \u092e\u0947 \u0926\u093f\u0916\u093e\u092f\u093e \u091c\u093e\u0924\u093e \u0939\u0948\u0902 \u092c\u0939\u0941\u0924 \u0939\u0940 \u0905\u091a\u094d\u091b\u0947 \u0938\u0947 \u0938\u092e\u091d \u092e\u0947 \u0906 \u0917\u092f\u093e \u0939\u094b\u0917\u093e \u0964 \u092b\u093f\u0930 \u092d\u0940 \u092f\u0926\u093f \u0915\u094b\u0908 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>\u0905\u092a\u0928\u093e \u0915\u0940\u092e\u0924\u0940 \u0938\u092e\u092f \u0926\u0947\u0928\u0947 \u0915\u0947 \u0932\u093f\u090f \u092c\u0939\u0941\u0924 \u092c\u0939\u0941\u0924 \u0927\u0928\u094d\u092f\u0935\u093e\u0926 \u0964 \u0906\u092a\u0915\u094b \u092f\u0939 Article Read Dynamic Google Sheet Data \u0915\u0948\u0938\u093e \u0932\u0917\u093e \u092c\u0924\u093e\u0928\u093e \u0928 \u092d\u0942\u0932\u0947 <\/p>\n\n\n\n<p>Read Dynamic Google Sheet Data<\/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>Read Dynamic Google Sheet Data, Explore how to seamlessly display Google Sheet data into an HTML table using Apps Script &amp; JavaScript, with a unique feature\u2014no need to fix columns! With every column addition in your Google Sheet, the HTML table auto-updates upon page refresh. This tutorial provides a step-by-step guide on achieving dynamic data [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":12199,"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-12096","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-html-table-crud.jpg?fit=1280%2C720&ssl=1","_links":{"self":[{"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/posts\/12096","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=12096"}],"version-history":[{"count":52,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/posts\/12096\/revisions"}],"predecessor-version":[{"id":12205,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/posts\/12096\/revisions\/12205"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/media\/12199"}],"wp:attachment":[{"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/media?parent=12096"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/categories?post=12096"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/selfimagination.in\/tips\/wp-json\/wp\/v2\/tags?post=12096"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}