前の記事の続きです。この記事は主にテンプレートでの記事になります。
目次
テーブルの各セルに埋め込んだ子要素にアクセスする
テーブルの各セルの値（＜td＞要素に記載された値）を取得することことはそれほど難しくありません。以下の要領で取得することができます。
ところが、GASにおいては、＜td＞要素に記載された<select>要素の値を取得するのはあまり簡単ではない様です。
特定のセルであれば問題ないのですが、一般的なセル指定（ｉ行・k列番目のセル）では、通常の「．」（ドット）で繋いだ子要素指定では取り出せませんでしたし、要素にid値やclass値を指定してもうまく行きませんでした。
上の様なコードを色々試しました。（子要素やidを指定する命令を試しました）通常のHTML文であればこれで取り出せる筈のところですが・・・GASで作成されたHTMLではテーブル内の要素へのアクセスは勝手が違う様です。（違っていたらすみません）
試行錯誤した結果、今回はセルに埋め込まれたプルダウンにアクセスするために「JQuery」というツールを導入することにしました。JQueryを使うと、HTML上の要素へのアクセスが非常に容易になります。プルダウン要素にも問題なくアクセスできました。
JQueryの簡単なご紹介
「JQuery」はJavascriptの一連の処理をごく短いコードで記述できるようにするツールです。その命令文の代表的な形は以下の様になっています。
この「要素へのアクセス」の部分が秀逸で、わずかな手掛かりを与えるだけで欲しい要素を見つけ出してくれます。今回はこんな要領で記述します。
このJQueryですが、以下のコードをヘッダセクションに記述するだけで使える様になります。とても簡単ですね！（読み込み先のURLはいくつか紹介されていますが、ここではgoogleで管理されているものを使用しています）
<!---- JQuery導入---->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
JQueryを使ってプルダウンの値を取得する
では具体的なコードを以下にご紹介します。
まず、テーブルを生成する時にプルダウンを埋め込む＜td＞要素にid値を指定しておきます。（インラインコードであることに注意ください。１行目の最後「id=・・・」とある部分がそれです。）ここでは「R[行番号]」というid値にしています。なお、行番号はインラインコード（スクリプトレット：<?＝変数？＞）で記述しています。あ
?><td contenteditable="true" inputmode="text" id="R<?=iRow ?>">
<select >
<!-- 値に応じて「selected」を設定する -->
<option value="" <? if(Cell == ''){ ?> selected <? } ?>>－</option>
<option value="食費" <? if(Cell == '食費'){ ?> selected <? } ?>>食費</option>
<option value="雑貨" <? if(Cell == '雑貨'){ ?> selected <? } ?>>雑貨</option>
<option value="衣類" <? if(Cell == '衣類'){ ?> selected <? } ?>>衣類</option>
<option value="交通"<? if(Cell == '交通'){ ?> selected <? } ?>>交通</option>
</select>
</td><?
こうしてプルダウンを埋め込んだテーブルのセルに、id値を手掛かりにアクセスできる様になりました。（補足：このままJQueryを使わないでも処理できそうですが、うまくいきませんでした。）
プルダウンへのアクセスするコードは以下の様になります。
//---- JQuery記述----->
//ID値に追応じてテキスト値を取得し変数に代入
var myID = "#R"+ iRow;
myCells[iRow][iCol] =$(myID).closest('tr').find('select').val();
コードの解説：
手順１ セレクタを作成
まず「#」＋「id値」という文字列を作ります。これが該当のid値を持つ要素へのアクセス指標（セレクタ）になります。
手順２ closest文で親要素のセルにアクセスする
次に、$(セレクタ)．closest（’要素種類’）とすると、「セレクタが示す要素に最も近い場所にある「要素種類」を取得できます。
ここでは、「R[行番号]のid値を持つ要素」に最も近い「＜td＞要素（セル）」を取得しています。（セレクタが示す要素はこの場合セル自身のはずですが・・・確信がもてなかったのでこの様にしています）
手順3 find文で子要素の<select>にアクセスする
そして・・・．find（’要素種類’）とすると、「子要素となっている「指定の要素種類」」を取得できます。
今回は．find<select>としていますが、セルの中には＜select＞要素は１つしかない筈ですので、これで指定の行にある「＜setect＞要素にアクセス」できます。
手順4 val文でvalue値を取得する
更に・・・．val（）とすると、＜select＞要素のvalue値が取得できます。
ここまでの作業をたった２行でJQueryでは記述しています。わずかの手掛かりから、どこにあるのか分からないHTMLオブジェクトを適格にピックアップしてくれるJQueryは、私には以下の様なイメージに思えます。
ここまでできれば後の処理は比較的容易です。
テーブルの値を変数に取得してスクリプトに引き渡して、スプレッドシートに書き込むまでについては、以下を参照してください。
こうして、プルダウンを使ったテーブルで、データを日別のシートに書き込みできる様になりましたが、過去のシートを読み込んで参照したり編集したいこともありますよね。
次の記事では、日別シートを指定して読み込む方法をご紹介します。
