sample: change clicked table row's color

by sii_side

HTML

<table>
  <tr><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td></tr>
</table>

CSS

table, td {
  border: 1px solid #000;
}

td {
  width: 50px;
  height: 15px;
}

JavaScript

var table = document.querySelector("table");
var tr = table.querySelectorAll("tr");

table.addEventListener("click", function(e) {
	//clickされたのがtd要素のとき、
	if(e.target.tagName.toLowerCase() === "td") {
    for(var i = 0; i < tr.length; i++) {
    	//一旦全てのtr要素の背景色を白にし、
      tr[i].style.backgroundColor = "white";
    }

		//clickされたtd要素の親であるtr要素のみ背景色を赤にする
		e.target.parentNode.style.backgroundColor = "red";
  }
}, false);