从行到行单击时突出显示和取消突出显示表行

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

取消选择时无法取消突出显示行

 <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>

Answer 5

如果在每行中提供类名和ID，则可以使用 Azle ：

HTML

<table class="dataTable">
  <tr class='dataTable_row' id='row_a'><td>Data1</td><td>Data2</td></tr>
  <tr class='dataTable_row' id='row_b'><td>Data1</td><td>Data2</td></tr>
  <tr class='dataTable_row' id='row_c'><td>Data1</td><td>Data2</td></tr>
</table>

方位角

create_azle(function() {
    az.highlight_row_on_click('dataTable', 1, 'limegreen')
})

结果：

这里是FIDDLE

如果要创建更大的表，则需要确保在附加事件之前已渲染了该表。您可以使用Azle的call_once_satisfied函数：

az.call_once_satisfied({
     "condition" : "az.get_row_count('my_table', 1) > 0",
     "function" : "az.highlight_row_on_click('my_table', 1, 'limegreen')"
 })

下面是一个示例，其中该表是通过API调用创建的，并且一旦呈现了表，便会附加高亮事件：

这里是FIDDLE。