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未返回Array，因此需要使用document.querySelectorAll。

[].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();

使用纯javascript（无jquery）切换行颜色红色和表格颜色白色

2 个答案: