Question

我有一个html表（列名称：T1，T2，T3）。我只想突出显示列名（T1），只有当用户单击该列名时，其余列名才没有突出显示（T2，T3）。然后，当用户单击另一个列名（T2）时，它被突出显示，但是我希望所有其他列名都被重设而没有突出显示（T1，T3）。

如何仅使用javascript，css和/或html来做到这一点？请不要包括JQuery，我无法使用它。

Answer 1

role:

()

var elems = document.querySelectorAll('td');

var fnClick = function(){
	var ie = document.querySelectorAll('td');
  for(var x = 0; x < ie.length; x++){
    elems[x].classList.remove("red");
  }
  this.classList.add("red");
}

for (var i = 0; i < elems.length; i++){
     elems[i].addEventListener("click", fnClick);
}

Answer 2

单击时，遍历所有列名并删除该类，比如说“突出显示”。

之后，将“ highlight”类添加到所单击的列名称中。

或者，通过类名称“ highlight”查找元素，然后从所有元素中删除该类，然后继续将该类添加到单击的元素中。

Answer 3

首先向所有列元素添加一个唯一的类，例如-T1表示T1，T2表示T2，等等。

然后创建具有适当背景颜色的css类“ highlight”以创建突出显示效果。

然后在标签内编写一个onclick函数调用，如<td class="T1" onclick="addHighlight(T1)">...</td>

之后，您可以使用JavaScript创建函数'addHighlight'，该函数在用户单击列元素时触发。在该函数中，您可以使用getElemenstbyClassname来访问具有单击的列的类名的元素（您传入的类名将其用作参数）和addClass方法来添加类突出显示。

要在单击另一列时删除突出显示效果，只需搜索具有“突出显示”类的元素，然后使用removeClass删除该类，从而删除突出显示效果。

有关更多指导，请参考w3schools.com。在那里有清楚的解释：）

Answer 4

您可以通过为td元素设置:focus伪类的样式来实现。为了使您的td元素可聚焦，您还必须为您的td元素设置tabindex属性。

Index.html

<html>
  <head>
    <title>
      Table Highlight
    </title>
    <style>
      table {
        border: solid;
      }
      td {
        width: 100px;
        height: 100px;
        border: dotted 1px;
      }

      td:focus {
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td tabindex="1">T1</td>
        <td tabindex="1">T2</td>
        <td tabindex="1">T2</td>
      </tr>
      <tr>
        <td>10</td>
        <td>11</td>
        <td>12</td>
      </tr>
      <tr>
        <td>20</td>
        <td>21</td>
        <td>22</td>
      </tr>
    </table>
  </body>
</html>

这是一个密码笔，称为POC：

https://codepen.io/anon/pen/eKMgvJ

如果要突出显示被单击表格单元格的对应列名（表格标题元素），则需要在表格上添加点击处理程序。

Javascript-仅在单击时突出显示列名

4 个答案:

Index.html