使用纯 JavaScript 单击时切换行颜色红色和表颜色白色(无 jquery)

Question

我正在尝试在纯javascript中复制以下JSFiddle，而不依赖jquery或其他方法。

$('table tr').each(function(a,b){
    $(b).click(function(){
        $('table tr').css('background','#ffffff');
        $(this).css('background','#ff0000');   
    });
});

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

第一次单击突出显示一行，第二次单击突出显示下一个选定行并从前一行中删除突出显示。此外，我尝试在我的工作中实现此代码，但它根本不起作用，并提供 0 条错误消息，为我提供有关正在发生的事情的线索。将此小提琴复制/粘贴到新小提琴中不会重现结果，这似乎是尝试追踪此问题的答案时的一个常见主题。我已经搜索了整个stackoverflow，但无法找到仅依赖于css，javascript和/或html的工作解决方案。

Answer 1

使用 [].forEach.call 迭代tr元素。需要使用Function#call，因为document.querySelectorAll不会返回Array。

[].forEach.call(document.querySelectorAll('table tr'),
  function(el) {
    el.addEventListener('click', function() {
      [].forEach.call(document.querySelectorAll('table tr'), function(el) {
        el.style.background = '#fff';
      });
      this.style.background = '#f00'
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table border="1" cellspacing="1" width="100%" id="table1">
  <tr>
    <th>Column1</th>
    <th>Column2</th>
    <th>Column3</th>
    <th>Column4</th>
    <th>Column5</th>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
    <td>data</td>
  </tr>
</table>

Answer 2

https://jsfiddle.net/M4V3R1C8/7L2typ5t/1/此脚本允许您完全执行我正在寻找的操作。唯一的缺点是您无法激活顶行。另外，我似乎无法更改 .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();