javascript - 使用纯 javascript(无 jquery)点击切换行颜色红色和表格颜色白色

Question

我正在尝试复制以下 JSFiddle在纯 javascript 中，不依赖于 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 条错误消息，让我了解正在发生的事情。将这个 fiddle 复制/粘贴到一个新的 fiddle 中不会重现结果，这似乎是一个常见的主题，同时试图找到这个问题的答案。我在整个 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>