CODEWITHSUNDEEP
javascriptjqueryhtmlgoogle-apps-script
Shyam Kansagra
Shyam Kansagra

Reputation: 912

Add table row dynamically in apps script

I have a table with two rows: first row is header and second row is like this...

<tr>
      <td><b>1</b></td>
      <td><input type="date" id="dt" name="dt"></td>
      <td><input type="time" id="tmStart" name="tmStart"></td>
      <td><input type="time" id="tmEnd" name="tmEnd"></td>
      <td><select id="ddlTrainType" name="ddlTrainType"><option>Select Training</option></select></td>
      <td><input type="text" id="txtLoc" name="txtLoc"></td>
      <td><select id="ddlProg" name="ddlProg"><option>Select Program</option></select></td>
      <td><select id="ddlTrainMod" name="ddlTrainMod"><option>Select Module</option></select></td>
      <td><select id="ddlTrainName" name="ddlTrainName"><option>Select Trainer</option></select></td>
      <td><select id="ddlStat" name="ddlStat"><option>Pending</option><option>Completed</option><option>Cancelled</option></select></td>
</tr>

Note: all select tags drop-downs are populated from another google spreadsheet.

Now, on button click(button like add row), I want to append a similar row like above to this table.

Not only add a row, but also, in the end, let's say there are 5 rows in total and submit is clicked, then I want to store all 5 rows in a Google Spreadsheet.

Any ideas how to do this?

I already tried adding row with the help of code.gs file and reconstructing template using HtmlService.createTemplate. But this can only be used in doGet(e) I guess and cannot work with js button action.

Let's say we create such dynamic table, but even after that, how do we pass all the table data from javascript to code.gs file?

Upvotes: 2

Views: 2037

Answers (1)

Shyam Kansagra
Shyam Kansagra

Reputation: 912

Okay after some rigorous Googling and testing so many scenarios, I myself came up with the solution, hope it will help someone someday. Here it goes:

  1. To append row dynamically, I used this:

$('#trainingTable > tbody:last-child').append(newRow);

Here, #trainingTable is id of my table. newRow was like this:

var newRow = '<tr id="rowToClone">'
      + '<td><b>'+ rowCount +'</b></td>'
      + '<td><input type="date" id="dt'+rowCount+'" name="dt'+rowCount+'"></td>'
      + '<td><input type="time" id="tmStart'+rowCount+'" name="tmStart'+rowCount+'"></td>'
      + '<td><input type="time" id="tmEnd'+rowCount+'" name="tmEnd'+rowCount+'"></td>'
      + '<td><select id="ddlTrainType'+rowCount+'" name="ddlTrainType'+rowCount+'"><option>Select Training</option></select></td>'
      + '<td><input type="text" id="txtLoc'+rowCount+'" name="txtLoc'+rowCount+'"></td>'
      + '<td><select id="ddlProg'+rowCount+'" name="ddlProg'+rowCount+'"><option>Select Program</option></select></td>'
      + '<td><select id="ddlTrainMod'+rowCount+'" name="ddlTrainMod'+rowCount+'"><option>Select Module</option></select></td>'
      + '<td><select id="ddlTrainName'+rowCount+'" name="ddlTrainName'+rowCount+'"><option>Select Trainer</option></select></td>'
      + '<td><select id="ddlStat'+rowCount+'" name="ddlStat'+rowCount+'"><option>Pending</option><option>Completed</option><option>Cancelled</option></select></td>'
      + '</tr>';

Here rowCount is used to uniquely identify rows. It is defined as below:

var rowCount = $('#trainingTable tr').length;
  1. Now comes the question of populating drop-downs from spreadsheet. For that I simply used same function which was used earlier but this time I passed rowCount as well.

Now, our table is created properly and is fully dynamic. Now, the question was to pass latest table data to gs file. For that, I used the following:

var entireForm = document.getElementById("MY_FORM_ID");
google.script.run.withSuccessHandler(showSuccess).GS_FUNCTION(entireForm);

Now when I used Logger.log to check the form values, I got entire latest object of the form on gs file side. Hence, problem solved!

Upvotes: 2

Related Questions