クリックしたセルを取得して、そこに値を追加したいです。

Question

実現したいこと

ソースコードです

<table>
<tbody>
  <tr>
    <td class="table-cell" data-num='1'></td>
    <td class="table-cell" data-num='2'></td>
    <td class="table-cell" data-num='3'></td>
  <tr>
</tbody>
</table>

クリックしたセルを取得して、そこに値を追加したいです。例えばdata-num1をクリックすると、

<td class="table-cell" data-num='1'>Click!</td>

のようになって欲しいです。

問題点

セルを取得しようと、以下のコードを書いてみましたがエラーが発生しました。データ属性を使用するのは今回が初めてで、使い方が間違っているかもしれません。

var number = (document.getElementsByClassName('table-cell').dataset.num;
console.log(number);

/* 発生したエラー
TypeError: Cannot read property 'num' of undefined
    at HTMLTableElement.clickCell
*/

追記

当初の予定とは異なりますが、
e.target.getAttribute('data-num');で取得できました。しかし文字列の追加する方法が分かりません。

Comments

[yambejp]

ボーダーの無いテーブルの空のセルをクリックするのは至難の技だと思いますが・・・

[退会済みユーザー]

cssの方でtable-cellにheightとwidthを設定しています。

Answer 1

いまの情報だとこんな感じですか？

Comments

[yambejp]

<style>
table{
border-collapse:collapse;
}
.table-cell{
border:solid 1px #000000;
width:100px;
height:100px;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', ()=>{
document.querySelectorAll('.table-cell').forEach(x=>{
x.addEventListener('click',()=>{
x.textContent="Click!";
});
});
});
</script>
<table>
<tbody>
<tr>
<td class="table-cell" data-num='1'></td>
<td class="table-cell" data-num='2'></td>
<td class="table-cell" data-num='3'></td>
<tr>
</tbody>
</table>

[yambejp]

追加なのか上書きなのかにもよります

[退会済みユーザー]

ありがとうございます