Javascript-仅在单击列名时高亮显示该列名_Javascript_Html_Css

Javascript-仅在单击列名时高亮显示该列名

javascript html css

Javascript-仅在单击列名时高亮显示该列名,javascript,html,css,Javascript,Html,Css,我有一个html表（列名称：T1、T2、T3）。我只想在用户单击列名（T1）时突出显示它，其余列名没有突出显示（T2，T3）。然后，当用户单击另一个列名（T2）时，它会高亮显示，但我希望所有其他列名都重置为不高亮显示（T1，T3）如何仅使用javascript、css和/或html来实现这一点？请不要包括JQuery，我无法使用它。 var elems=document.querySelectorAll（'td'）； var fnClick=函数（）{ var ie=document.quer

我有一个html表（列名称：T1、T2、T3）。我只想在用户单击列名（T1）时突出显示它，其余列名没有突出显示（T2，T3）。然后，当用户单击另一个列名（T2）时，它会高亮显示，但我希望所有其他列名都重置为不高亮显示（T1，T3）

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

var elems=document.querySelectorAll（'td'）；
var fnClick=函数（）{
var ie=document.querySelectorAll（'td'）；
对于（变量x=0；x


.red{背景色：红色；}

测试
测试
测试
测试
测试
测试
测试
测试
测试
单击时，遍历所有列名并删除类，比如说“突出显示”
之后，将类“highlight”添加到单击的列名中
或者，按类名“highlight”查找元素，并从所有元素中删除该类，然后继续将该类添加到单击的元素。
首先为所有列元素添加一个唯一的类，例如-T1代表T1，T2代表T2，等等
然后创建一个具有适当背景颜色的css类“highlight”，以创建高光效果
然后在标记中编写一个onclick函数调用，如…

之后，您可以使用JavaScript创建函数“addHighlight”，当用户单击列元素时会触发该函数。在该函数中，您可以使用getelementsbyclassname
访问具有所单击列的类名的元素（您传入类名并将其用作参数），并使用addClass
方法添加类高亮显示
要在单击另一列后删除突出显示效果，只需搜索具有类“highlights”的元素，并使用removeClass
删除该类，从而删除突出显示效果
请参阅w3schools.com以获取更多指导。所有这些都在这里得到了清楚的解释：）
您可以通过为td元素设置伪类的样式来实现这一点。为了使td元素能够聚焦，您还必须将属性设置为td元素
Index.html

表格突出显示
桌子{
边框：实心；
}
运输署{
宽度：100px；
高度：100px；
边框：虚线1px；
}
运输署：焦点{
背景颜色：蓝色；
}
T1
T2
T2
10
11
12
20
21
22

以下是作为POC的代码笔：

如果要突出显示单击的表格单元格的相应列名（表头元素），则需要在表格上添加一个单击处理程序。欢迎使用Stackoverflow。请分享您迄今为止尝试过的代码。这样，同龄人就可以在上面工作，而不是自己构建整个系统。
<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>