javascript - 突出显示表 OnClick 中的列

Question

我想知道是否可以制作一个脚本，on column click突出显示该列，而不是仅突出显示它hover。

现在我已经制作了这个 CSS

* {
    box-sizing:border-box;
  }
  
  table {
    overflow: hidden;
  }
  
  td, th {
      position: relative;
  }
  td:hover::before { 
      background-color: #eee;
      content: '';  
      height: 100%;
      left: -5000px;
      position: absolute;  
      top: 0;
      width: 10000px;   
      z-index: -2;        
  }
  td:hover::after { 
      background-color: rgb(255, 218, 170);
      content: '';  
      height: 10000px;    
      left: 0;
      position: absolute;  
      top: -5000px;
      width: 100%;
      z-index: -1;        
  }

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

有没有可能script做到这一点，只是列：

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) {
        }
      }
      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' style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

所以问题是：我怎样才能使像行选择脚本这样的东西，只为列。因此，当我单击 时Firstname, Lastname or Age，该列被选中，如果再次单击也可以取消选中。

标签： javascriptjqueryhtmlcss

Answer 1

获取单击的索引，td然后选择所有th并td使用该索引并应用 css。

function highlight_row() {
  var table = document.getElementById("testresultsTable");
  var cells = table.getElementsByTagName("td");
  for (var i = 0; i < cells.length; i++) {
    var cell = cells[i];
    cell.onclick = function() {
      const parentTds = this.parentElement.children;
      const clickedTdIndex = [...parentTds].findIndex(td => td == this);
      const columns = document.querySelectorAll(`td:nth-child(${clickedTdIndex+1}), th:nth-child(${clickedTdIndex+1})`);
      document.querySelectorAll('.selected').forEach(col => col.classList.remove('selected'));
      columns.forEach(col => {
        col.classList.add('selected');
      });
    }
  }
}

window.onload = highlight_row;

.selected {
  background-color: red;
}

<table style="width:100%" id="testresultsTable">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

- 编辑 -

function highlight_row() {
  var table = document.getElementById("testresultsTable");
  var tdsth = table.querySelectorAll("th, td");

  for (var i = 0; i < tdsth.length; i++) {
    var cell = tdsth[i];
    cell.onclick = function() {
      const children = this.parentElement.children;
      const clickedThIndex = [...children].findIndex(th => th == this);
      const columns = document.querySelectorAll(`td:nth-child(${clickedThIndex + 1}), th:nth-child(${clickedThIndex + 1})`);
      columns.forEach(col => {
        if (col.classList.contains('selected'))
          col.classList.remove('selected');
        else
          col.classList.add('selected');
      });
    }
  }
}

window.onload = highlight_row;

.selected {
  background-color: red;
}

td,
th {
  cursor: pointer;
}

<table style="width:100%" id="testresultsTable">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>