LANG SELRCT

コードを書く場所

2020年1月31日金曜日

テーブル内でクリックしたセルの位置を知りたい


テーブル内の何行目、何列目のセルをクリックしたか知りたい


これで取得できそう
  • ELEMENT.parentNode.rowIndex
  • ELEMENT.cellIndex



コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>

<head>
<style>
table {
  border-collapse: collapse;
}

th, td {
  border: solid 1px lightgray;
  width: 120px;
}
</style>
</head>

<body>
<div id="mainDiv"></div>

<script>
function elem(id) {
  return document.getElementById(id);
}

function create(tag) {
  return document.createElement(tag);
}

createElements()

function createElements() {
  var table = create('table');
  var tbody = create('tbody');
  var cols = 3;
  var rows = 4;

  for(var i = 0; i < rows; i++) {
    var tr = create('tr');
    for(var j = 0; j < cols; j++) {
      var td = create('td');
      td.textContent = i + "-" + j;
      td.onclick = function(e) { 
        var col = this.cellIndex;
        var row = this.parentNode.rowIndex;
        alert([row, col]);
      }
      
      tr.appendChild(td);
      tbody.appendChild(tr);
    }

    var main_div = elem('mainDiv');
    table.appendChild(tbody);
    main_div.appendChild(table);
  }
}

</script>
</body>
</html>


最新の投稿

JIRAで複数の課題の変更履歴をシートに書き出したい(ステータス変更だけ)

JIRAで複数の課題の変更履歴をシートに書き出したい ではすべての変更履歴を取得しました。 今回はfieldが「status」の場合だけシートに書き出したい。 作成時のステータス取得について 今回は下記の方法で取得しています。 作成時の配列を以下の...