使用纯javascript（无jquery）在单击时切换行颜色红色和表颜色白色

我试图在纯javascript中复制以下内容，而不依赖jquery或其他方法

$（'table tr'）。每个（函数（a，b）{
$（b）。单击（函数（）{
$（'table tr'）.css（'background'，'#ffffff'）；
$（this.css（'background'，'#ff0000'）；
});
});

数据
数据
数据
数据
使用
[].forEach.call
迭代
tr
元素。需要使用，因为不返回
数组


[].forEach.call（document.queryselectoral（'table tr'），
功能（el）{
el.addEventListener（'click'，函数（）{
[]forEach.call（document.querySelectorAll（'table tr'），function（el）{
el.style.background='#fff'；
});
this.style.background='#f00'
});
});

专栏1
专栏2
第3栏
专栏4
专栏5
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据

这个脚本可以让你完全按照我的要求去做。唯一的缺点是不能激活最上面的一行。此外，我似乎无法更改.selected名称，因为它将停止工作。好了，现在开始下一个问题

function selected(){
    var index,
      table = document.getElementById("dps");
  for(var i = 1; i < table.rows.length; i++) {
        table.rows[i].onclick = function() {
        if(typeof index !== "undefined"){
          table.rows[index].classList.toggle("selected");
      }
      console.log(typeof index);
      index = this.rowIndex;
      this.classList.toggle("selected");
      console.log(typeof index);
    };
  }
}
selected();

所选函数（）{
var指数，
table=document.getElementById（“dps”）；
对于（变量i=1；i
您能否提供一个非jQuery解决方案的尝试，或许我们可以指出它的问题所在？以下是我当前的尝试，在尝试了几个不同的选项后，结果有点混乱：更新后的尝试在JSFIDLE中工作得很好，可以复制/粘贴到新实例而不会中断。不幸的是，这个问题似乎来自于它在更大的开发过程中的集成。rip.OP需要纯javascript而不依赖jQuery