ＨＴＭＬ　選択行　背景色変更

javascriptで表示されている一覧表の１行をクリックしたら背景色を変更したいのですが。。。

表の中の１行をクリックしたら背景色を変更したいです。また、次の行をクリックした時は最初にクリックした行の色を元の色に戻すようにしたいです。
例えば、１行目をクリックしたら白⇒赤、２行目をクリックしたら１行目は赤⇒白に戻し、２行目を白⇒赤
というようにしたいのですが、１行目の色を変える所は出来たのですが、次にクリックした時に１行目の色を元に戻すことが出来ずに躓いています。。。
どなたか、ご教授願えれば、と思い質問させてもらいました。
どうぞよろしくお願いします。

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

回答1件

ベストアンサー

クラスで調整して下さい

css
1.active{background-Color:red;}

javacript
1document.addEventListener('click',function(e){
2  var t=e.target;
3  if(t.nodeName=="TD"){
4    Array.prototype.map.call(t.parentNode.parentNode.children,function(x){
5      x.classList.remove('active');
6      if(x==t.parentNode) x.classList.add('active');
7    });
8  }
9});

HTML
1<table>
2<tbody>
3<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
4<tr><td>5</td><td>6</td><td>7</td><td>8</td></tr>
5<tr><td>9</td><td>10</td><td>11</td><td>12</td></tr>
6</tbody>
7</table>
8