テーブルのセルのみの背景色を変えたい

前提・実現したいこと

上のような表を作りました。
赤で囲ったところをクリックしたら、そこの背景が黄色くなるようにしたいです。
そこのセルだけを選択する方法がよくわかりません。
addClassでselectedというクラスをつけるという流れでやればいいかなと思っています。

発生している問題・エラーメッセージ

onclickを用いるのだろうというのは想像できるのですが、jsファイルをどう記述すればいいかわかりません
cssはselectedというラベルをつけてやればいいのは理解できています。

該当のソースコード

GAS
1<!DOCTYPE html>
2<html>
3  <head>
4    <base target="_top">
5    <?!= include('css'); ?>
6  </head>
7  <body>
8    
9      <div class="training">
10        <h2>現在受付中の研修一覧</h2>
11        以下のリストから参加可能な研修を選び申告してください。
12        <br>
13        <br>
14        <table>
15          <thead>
16            <tr>
17              <th></th>
18              <th>第1希望</th>
19              <th>第2希望</th>
20              <th>第3希望</th>
21            </tr>
22          </thead>
23          <tbody id="selectTime" onclick="js()">
24          <?!= info(); ?>
25          </tbody>      
26   　　　　　　　　　 </table>
27   　　　　　　　 <a class="submit" target="_blank"　>研修を申し込む</a>
28      </div>
29   
30    <?!= HtmlService.createHtmlOutputFromFile('js').getContent(); ?>
31  </body>
32</html>
33
34
35

GAS
1<script>
2
3function js(){
4
5</script>
6

行動規範の内容に同意します

回答1件

ベストアンサー

ブラウザはどのくらいまで想定しているのでしょうか？

javascript
1<style>
2.selected{background-Color:yellow;}
3</style>
4<script>
5window.addEventListener('DOMContentLoaded', function(e){
6  [].forEach.call(document.querySelectorAll('#selectTime td'),function(x){
7    x.addEventListener('click',function(e){
8      x.classList.toggle('selected');
9    });
10  });
11});
12</script>
13<table>
14<thead>
15<tr>
16<th>&nbsp;</th>
17<th>第1希望</th>
18<th>第2希望</th>
19<th>第3希望</th>
20</tr>
21</thead>
22<tbody id="selectTime">
23<tr>
24<td>&nbsp;</td>
25<td>1</td>
26<td>2</td>
27<td>3</td>
28</tr>
29<tr>
30<td>&nbsp;</td>
31<td>4</td>
32<td>5</td>
33<td>6</td>
34</tr>
35</tbody>      
36</table>