使用純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();