点击表格行时，如何高亮和取消高亮显示行？

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代码：

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。

谢谢。

- BaconJuice

---

@OneTrickPony 这是我在这里打字时的一个笔误。已经更新了。 - BaconJuice

Answer 1

我已经在JSFiddle上创建了以下内容的工作示例：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;
}

- Richard YS

---

为什么要踩我？这个代码可以正常工作，而且代码量更少。 - Richard YS

好的解决方案。当选择一个新的选项时，如何取消选择其他选项？ - Si8

Answer 2

最近我遇到了同样的问题，但是我使用纯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;

- Armaan Dhir

Answer 3

你需要取消其他行的高亮显示，因为现在你只是在更改点击的那一行。

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

- macino

---

你的代码有一个小问题，我似乎无法找出问题所在。现在需要点击两次才能在页面加载时突出显示表格行。在最初的两次点击之后，表格功能正常。有什么想法吗？ - BaconJuice

抱歉，我不在身边了。尝试在页面加载后为每一行初始化“hilite”。 - macino

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>

- stephen carvalho

Answer 5

这个演示表格行选择具有以下功能：

• 选择单击的行，并取消选择任何先前选择的行
• 如果已选择的行被单击，则取消选择

注意：这是基于@Richard YS发布的答案。

HTML：

 <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Country</th>
      </tr>
    </thead>
    <tbody>
      <tr onclick="selectRow(this,'selected');">
        <td>Maria Anders</td>
        <td>Germany</td>
      </tr>
      <tr onclick="selectRow(this,'selected');">
        <td>Francisco Chang</td>
        <td>Mexico</td>
      </tr>
      <tr onclick="selectRow(this,'selected');">
        <td>John Doe</td>
        <td>USA</td>
      </tr>
      <tr onclick="selectRow(this,'selected');">
        <td>Shankra Pillai</td>
        <td>India</td>
      </tr>
    </tbody>
  </table>

JavaScript：

    let prevIx
    let prevTr

    function selectRow(tr, className) {

        let ix = tr.rowIndex

        if (ix === prevIx) { // row already selected, so unselect
          tr.className = tr.className.replace(className,"")
          prevIx = null
          prevTr = null
        }
        else { // no selected rows

          if (prevTr) {
            // unselect previously selected row
            prevTr.className = prevTr.className.replace(className,"")
          }

          // select current row
          tr.className += className
          prevIx = ix
          prevTr = tr
        }
    }

CSS：

table .selected {
    background-color: #6ccbfb;
    color: #fff;
}

- prasad_