LANG SELRCT

コードを書く場所

2019年1月5日土曜日

HTML要素を動的に作りたい(テーブル)


列数、行数を指定してテーブルを作る


デモ





  1. rowsに行数を入力する
  2. colsに列数を入力する
  3. 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の要素を取得する
その要素内にある要素の数だけ繰り返す
要素を削除する