突出顯示和取消突出顯示行上點擊行排列

Question

我一直在這個問題一段時間沒有運氣。

請注意。沒有jQuery的=/

JS代碼我已經是如下

function highlight(){ 
var table = document.getElementById('dataTable'); 
for (var i=0;i < table.rows.length;i++){ 
    table.rows[i].onclick= function() { 
    if(!this.hilite){ 
    this.origColor=this.style.backgroundColor; 
    this.style.backgroundColor='#BCD4EC'; 
    this.hilite = true; 
    } 
    else{ 
    this.style.backgroundColor=this.origColor; 
    this.hilite = false; 
    } 
    } 
} 
} 

的HTML作爲以下

<table id="dataTable"> 
    <tr onclick="highlight()"><td>Data1</td><td>Data2</td></tr> 
    <tr onclick="highlight()"><td>Data1</td><td>Data2</td></tr> 
    <tr onclick="highlight()"><td>Data1</td><td>Data2</td></tr> 
</table> 

目前，當我點擊它改變顏色，但是當我點擊第二第一行仍然保持突出顯示。你能否幫我完成這個任務，不用jquery？

謝謝。

Answer 1

您需要取消突出顯示其他行，因爲現在您只需更改點擊的行。

function highlight(){ 
var table = document.getElementById('dataTable'); 
for (var i=0;i < table.rows.length;i++){ 
    table.rows[i].onclick= function() { 
    if(!this.hilite){ 
    unhighlight(); 
    this.origColor=this.style.backgroundColor; 
    this.style.backgroundColor='#BCD4EC'; 
    this.hilite = true; 
    } 
    else{ 
    this.style.backgroundColor=this.origColor; 
    this.hilite = false; 
    } 
    } 
} 
} 

function unhighlight(){ 
var table = document.getElementById('dataTable'); 
for (var i=0;i < table.rows.length;i++){ 
    var row = table.rows[i]; 
    row.style.backgroundColor=this.origColor; 
    row.hilite = false; 
} 
} 

Answer 2

我已經創建了JSFiddle

的Javascript下面的工作示例：

function toggleClass(el, className) { 
    if (el.className.indexOf(className) >= 0) { 
     el.className = el.className.replace(className,""); 
    } 
    else { 
     el.className += className; 
    } 
} 

HTML：

<table class="gridview"> 
    <tr onclick="toggleClass(this,'selected');"><td></td><td></td></tr> 
    <tr onclick="toggleClass(this,'selected');"><td></td><td></td></tr> 
    <tr onclick="toggleClass(this,'selected');"><td></td><td></td></tr> 
</table> 

CSS：

.gridview .selected, .gridview tbody .selected { 
    background-color: #6ccbfb; 
    color: #fff; 
} 

Answer 3

我在同樣的問題，最近，只是解決了它使用純JS 這裏是我的版本的它 https://jsfiddle.net/armaandhir/Lgt1j68s/

function highlight_row() { 
    var table = document.getElementById('display-table'); 
    var cells = table.getElementsByTagName('td'); 

    for (var i = 0; i < cells.length; i++) { 
     // Take each cell 
     var cell = cells[i]; 
     // do something on onclick event for cell 
     cell.onclick = function() { 
      // Get the row id where the cell exists 
      var rowId = this.parentNode.rowIndex; 

      var rowsNotSelected = table.getElementsByTagName('tr'); 
      for (var row = 0; row < rowsNotSelected.length; row++) { 
       rowsNotSelected[row].style.backgroundColor = ""; 
       rowsNotSelected[row].classList.remove('selected'); 
      } 
      var rowSelected = table.getElementsByTagName('tr')[rowId]; 
      rowSelected.style.backgroundColor = "yellow"; 
      rowSelected.className += " selected"; 

      msg = 'The ID of the company is: '; 
      msg += rowSelected.cells[0].innerHTML; 
      msg += '\nThe cell value is: ' + this.innerHTML; 
      alert(msg); 
     } 
    } 

} //end of function 

window.onload = highlight_row; 

Answer 4

無法unhighlight行取消

<script type="text/javascript"> 

    function highlight(){ 
    var hilite; 
var table = document.getElementById('dataTable'); 
for (var i=0;i < table.rows.length;i++){ 
    table.rows[i].onclick= function() { 
    if(!this.hilite){ 
    unhighlight(); 
    this.origColor=this.style.backgroundColor; 
    this.style.backgroundColor='#fdee9a'; 
    this.hilite = true; 
    } 
    else{ 
    this.style.backgroundColor=this.origColor; 
    this.hilite = false; 
    } 
    } 
} 
} 

function unhighlight(){ 
    var hilite; 
var table = document.getElementById('dataTable'); 
for (var i=0;i < table.rows.length;i++){ 
    var row = table.rows[i]; 
    row.style.backgroundColor=this.origColor; 
    row.hilite = false; 
} 
} 

    </script>