javascript - 取消选择突出显示的行

Question

我有这个表，如果再次单击，我似乎不知道如何取消选择标记的字段？因此，双击id 2将选择->取消选择。

function highlight_row() {
    var table = document.getElementById('testresultsTable');
    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";    
        }
    }
  
  } //end of function
  window.onload = highlight_row;

<table id="testresultsTable">
    <thead>
        <th>ID</th>
        <th>Tests</th>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>TESTRUN1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>TESTRUN2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>TESTRUN3</td>
        </tr>
    </tbody>
</table>

我考虑过对 rowID 进行某种计数，因此如果连续单击多次，那么它将在 选择/取消选择之间切换？

Answer 1

您可以通过执行类似的操作来解决此问题，这将首先检查所选行中的 selected 类，如果找到则将其删除，否则会将其添加到该行中你点击了。完成后，该函数将循环遍历所有其他行，检查它们是否不是被单击的行，并相应地删除选定状态。

现在，一旦您单击，您的代码将在您单击的行上查找selected，如果找到，它将删除该类以重置样式，如果没有找到，它将添加 selected 类。之后，代码将检查所有行以查看它们是否不是选定的行并相应地设置它们的样式。

function highlight_row() {
  var table = document.getElementById('testresultsTable');
  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++) {
        if(row !== rowId) {
          rowsNotSelected[row].style.backgroundColor = "";
          rowsNotSelected[row].classList.remove('selected');
        }
      }
      var rowSelected = table.getElementsByTagName('tr')[rowId];
      if (rowSelected.classList.contains('selected')) {
          rowSelected.style.backgroundColor = "";
          rowSelected.classList.remove('selected');
      } else {
        rowSelected.style.backgroundColor = "yellow";
        rowSelected.classList.add("selected");
      }
      
    }
  }

} //end of function
window.onload = highlight_row;

<table id="testresultsTable">
  <thead>
    <th>ID</th>
    <th>Tests</th>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>TESTRUN1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>TESTRUN2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>TESTRUN3</td>
    </tr>
  </tbody>
</table>

希望这有帮助!