列数、行数を指定してテーブルを作る
デモ
- rowsに行数を入力する
- colsに列数を入力する
- create tableをクリックする
とテーブルが作られます
この例ではtd内にtextareaを配置します
（最大で10行、10列までに制限しています）
コード.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile("index");
}
|
意訳この機能がやること 指定したHTMLファイルを表示する |
index.html
<!DOCTYPE html>
<html>
<head>
<style>
textarea {
width: 120px;
height: 30px;
}
</style>
</head>
<body>
<input type='number' max="10" id='rows' placeholder="rows">
<input type='number' max="10" id='cols' placeholder="cols">
<button id='bt'>create table</button>
<div id="mainDiv"></div>
<script>
function get(id) {
return document.getElementById(id);
}
function create(tag) {
return document.createElement(tag);
}
get('bt').onclick = createElements;
function createElements() {
removeChild('mainDiv');
var table = create('table');
var tbody = create('tbody');
var cols = get('cols').value;
var rows = get('rows').value;
if(cols > 11 || rows > 11) {
alert('最大10列10行に設定してあります');
return;
}
for(var i = 0; i < rows; i++) {
var tr = create('tr');
for(var j = 0; j < cols; j++) {
var td = create('td');
var ta = create('textarea');
tr.appendChild(td);
td.appendChild(ta);
tbody.appendChild(tr);
}
var main_div = get('mainDiv');
table.appendChild(tbody);
main_div.appendChild(table);
}
}
function removeChild(id) {
var elem = get(id);
for (var i = elem.childNodes.length - 1; i >= 0; i--) {
elem.removeChild(elem.childNodes[i]);
}
}
</script>
</body>
</html>
|
意訳テキストエリアのスタイル 幅 高さ 行数の入力欄 列数の入力欄 ボタン div要素 この機能がやること 受け取ったidの要素を取得して返す この機能がやること 受け取ったtagの要素を作って返す btをクリックした時にcreateElementsを実行する この機能がやること mainDiv内の要素を削除する table要素を作る tbody要素を作る colsの値を取得する rowsの値を取得する もしcols が 11 より大きい または rows が 11 よりおきいなら アラートを出す 以下は実行しないでここで処理終える colsの数まで繰り返す tr要素を作る rowsの数まで繰り返す td要素を作る textarea要素を作る trにtdを追加する tdにtaを追加する tbodyにtrを追加する mainDiv要素を取得する tableにtbodyを追加する main_divにtableを追加する この機能がやること 受け取ったidの要素を取得する その要素内にある要素の数だけ繰り返す 要素を削除する |