動態添加錶行中的應用程序腳本

我有一個表兩行：第一行是標題行和第二行是這樣的...動態添加錶行中的應用程序腳本

<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>

注：所有選擇標籤下拉式選單從另一個谷歌電子表格填充。現在

，就按一下按鈕（按鈕像添加行），我想追加一個類似的行像上面這個表格。

不僅添加一行，而且最終還是假設總共有5行，並且提交被點擊，那麼我想要將所有5行存儲在Google Spreadsheet中。

任何想法如何做到這一點？

我已經嘗試使用code.gs文件添加行並使用HtmlService.createTemplate重建模板。但是，這隻能用於doGet(e)我猜，並且無法使用js按鈕操作。假設我們創建了這樣的動態表，但即使在那之後，我們如何將所有的表數據從javascript傳遞給code.gs文件？

來源

2017-06-13 Shyam Kansagra

經過一些嚴格的谷歌搜索和測試這麼多的場景後，我自己想出瞭解決方案，希望有一天能幫助別人。這裏有雲：

要動態地添加行，我用這個：

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

這裏，#trainingTable是我的表的ID。 newRow是這樣的：

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>';

這裏rowCount是用來唯一標識行。它被定義爲如下：

var rowCount = $('#trainingTable tr').length;

現在來自電子表格填充下拉菜單的問題。爲此我簡單地使用了早些時候使用的相同功能，但是這次我也通過了rowCount。

現在，我們的表格被正確創建並且是完全動態的。現在，問題是將最新的表格數據傳遞給gs文件。爲此，我使用了以下內容：

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

現在，當我用Logger.log檢查表單值，我得到了形式的全部最新對象GS文件的一面。因此，問題解決了！

來源

2017-06-14 06:54:31

動態添加錶行中的應用程序腳本

回答

相關問題