テーブル内の何行目、何列目のセルをクリックしたか知りたい
これで取得できそう
- 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>
|
参考
HTMLTableRowElement.rowIndex
https://developer.mozilla.org/ja/docs/Web/API/HTMLTableRowElement/rowIndex
HTMLTableCellElement
https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableCellElement
HTMLTableRowElement.rowIndex
https://developer.mozilla.org/ja/docs/Web/API/HTMLTableRowElement/rowIndex
HTMLTableCellElement
https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableCellElement
