Webアプリケーションのテーブル私は何をしようとしている

Question

にスプレッドシートの戻り値ごと：

1. スプレッドシート（​​6列、〜10 +行）からのすべての値を取得します

   • 私は値を取得できます。おそらく各列を個別に.getRange(row, column, sheet.getLastRow() - 1, 1).getValues();で取得します。あるいは、私は.getDataRange().getValues()で1つ1つの値を得て、そのようにテーブルに入れることができますか？

   • forループを使用する方が良いでしょうか？ - 非常に底

2. で例戻り[テンプレート化HTMLとして？]これらの値<table>, <tr>, <th>, <td>コードに囲ま -

3. の下例では、Webアプリケーション上の値を持つテーブルを表示名前は が

   • をクリックした際に取得style="display: none;"として<table>コード開始を挿入できます名前がクリックされると、表が表示されますか？または、一度クリックすると表示されていない表示されているdiv内にありますか？

 

テーブルの例：

<table> 
<tr> 
    <th>header1</th> 
    <th>header2</th> 
    <th>header3</th> 
    <th>header4</th> 
    <th>header5</th> 
    <th>header6</th> 
</tr> 
<tr> 
    <td>value1</td> 
    <td>value2</td> 
    <td>value3</td> 
    <td>value4</td> 
    <td>value5</td> 
    <td>value6</td> 
</tr> 
//etc 
</table> 

 

私は、私が鋳型とHTMLとしてカウントをやろうとしているどのような場合かを知りませんまたはテンプレートHTMLを使用してこれを行う方がよい場合は...

大きな助けが必要なことは、テーブルのすべての値を返してWebアプリケーションに表示することです。

 

---

 

ループ

のための実施例Iは、forループを行うと、列または行

column1[i] 
column2[i] 
etc 

のすべての値を返す場合または

row1[i] 
row2[i] 
etc 

これらの値をテーブルとして返すにはどうすればよいですか？

それはのようになります。その場合は

var x = "<tr>"; 
var y = row1[i]; 
var z = "</tr>"; 

return x + y + z 

、どのように私はすべての行/列の値のうち、全体のテーブルを作るのでしょうか？

また、完全にビルドされたら、CSSでテーブルをどのようにスタイルするのですか？私はまだテーブルにIDを追加してそこからスタイルを付けることができると仮定しています。

スプレッドシートに表示される行の正確な数がわからないので、この動的にするのが最適です - おそらく列の代わりにすべての行を取得し、各行にforループを使用しますか？

ご協力いただければ幸いです。ありがとう。

 

---

 

私は（ないスプレッドシート内の）テーブルに別の列を追加したい場合は、どのように私はそれをやって行くのでしょうか？ヘッダー行に行追加ボタンを追加し、テーブルデータのすべての行の最後に行削除ボタンを追加しようとしています。

また、<td>を<td contenteditable='true'>に設定できることはわかっていますが、データが新しく追加された行でのみ編集可能で、値が送信されるとテーブルセルは編集できません。 - イベントリスナー、または値が入力されたときにそのセルをcontenteditable='false'にトリガーするトリガーが必要ですか？

もう一度おねがいします。

Answer 1

ループはネストされたforループを使用できます。

var range = SpreadsheetApp.getActiveSpreadsheet().getDataRange().getValues(); 
var isHeader = true; 
var html = "<table>\n"; 
for (var i = 0; i < range.length; i++) { 
    html += "<tr>\n"; 
    for (var j = 0; j < range[i].length; j++) { 
    if (isHeader) { 
     html += "<th>" + range[i][j] + "</th>\n"; 
    } 
    else { 
     html += "<td>" + range[i][j] + "</td>\n"; 
    } 
    } 
    isHeader = false; 
    html += "</tr>\n"; 
} 
html += "</table>";