【HTML/Javascript】Tableをクリックした時に選択行の背景色を変える方法

Javascriptで以下の動画のようにクリックした行の背景色を変える方法について紹介します。

 

以下のソースコードで可能になります。これをbodyタグの最後に埋め込めればOKです。

var table = document.querySelector("table");
var tr = table.querySelectorAll("tr");
table.addEventListener("click", function(e) {
  if(e.target.tagName.toLowerCase() === "td") {
    //まずは全て背景色白
    for(var i = 0; i < tr.length; i++) {
      // alert(i +': '+ tr[i].style.backgroundColor);
      tr[i].style.backgroundColor = "white";
    }
    //選択行だけ色を変える
    e.target.parentNode.style.backgroundColor = "#eef";
  }
}, false);
 

 

 

 - HTML/JavaScript