Javascript 每行仅高亮显示一个单元格

我的目标是能够在单击时高亮显示单元格，再次单击时取消高亮显示

每行只能高亮显示一个单元格

下面是我尝试的代码，下面是

谢谢

HTML:

---

首先删除所有同级的背景色，如下所示

$'.hws css过滤器td'。单击函数{ $this.sibbins.cssbackground-color； $this.cssbackground-color，蓝色； }; .hws css过滤器{ 显示：表格； 保证金：自动； 垂直对齐：中间对齐； } .hws css过滤器tr{ 显示：表格行； 填充：0； 保证金：0； } .hws css筛选器td{ 显示：表格单元格； 边框：1px000； 宽度：15px； 高度：15px； 线高：15px； 文本对齐：居中； 垂直对齐：中间对齐； 填充：0； 保证金：0； 字体系列：monospace； 字体大小：10px； 文本转换：大写； 光标：指针； }

---

首先删除所有同级的背景色，如下所示

$'.hws css过滤器td'。单击函数{ $this.sibbins.cssbackground-color； $this.cssbackground-color，蓝色； }; .hws css过滤器{ 显示：表格； 保证金：自动； 垂直对齐：中间对齐； } .hws css过滤器tr{ 显示：表格行； 填充：0； 保证金：0； } .hws css筛选器td{ 显示：表格单元格； 边框：1px000； 宽度：15px； 高度：15px； 线高：15px； 文本对齐：居中； 垂直对齐：中间对齐； 填充：0； 保证金：0； 字体系列：monospace； 字体大小：10px； 文本转换：大写； 光标：指针； }

---

要更好地管理单元格格式，请为高亮显示的单元格创建新样式

.cell_highlight{
    background-color: blue;
}

并设置jQuery事件：

$('.hws-css-filter-td').click(function () {
    $(this).siblings().removeClass("cell_highlight"); 
    $(this).addClass("cell_highlight");
});

---

要更好地管理单元格格式，请为高亮显示的单元格创建新样式

.cell_highlight{
    background-color: blue;
}

并设置jQuery事件：

$('.hws-css-filter-td').click(function () {
    $(this).siblings().removeClass("cell_highlight"); 
    $(this).addClass("cell_highlight");
});

---

这将满足您的所有请求：

点击时突出显示 如果再次单击，则取消突出显示 每行只允许一个高亮显示的单元格 $'.hws css filter td'。单击，函数{ var$this=$this； 如果$this.hassclass'blue-highlight'{ $this.removeClass'blue-highlight'； }否则{ $this.addClass“蓝色高光”； $this.sibles.removeClass'blue-highlight'； } }; .hws css筛选器td{ 边框：实心1px 000； 高度：25px； 宽度：25px； 浮动：左； } .hws css过滤器tr{ 清除：左； } .蓝色高光{ 背景颜色：蓝色； }

---

这将满足您的所有请求：

点击时突出显示 如果再次单击，则取消突出显示 每行只允许一个高亮显示的单元格 $'.hws css filter td'。单击，函数{ var$this=$this； 如果$this.hassclass'blue-highlight'{ $this.removeClass'blue-highlight'； }否则{ $this.addClass“蓝色高光”； $this.sibles.removeClass'blue-highlight'； } }; .hws css筛选器td{ 边框：实心1px 000； 高度：25px； 宽度：25px； 浮动：左； } .hws css过滤器tr{ 清除：左； } .蓝色高光{ 背景颜色：蓝色； }

---

基于Figor的回答，还可以切换高亮显示的单元格

---

基于Figor的回答，还可以切换高亮显示的单元格

---

谢谢，要取消突出显示，我可以使用如下内容：$this.css'background-color'！=透明的查看我的最新答案&小提琴。我使用了一个名为selected的额外类@用户1763812谢谢，要取消突出显示，我可以使用类似：$this.css'background-color'！=透明的查看我的最新答案&小提琴。我使用了一个名为selected的额外类@用户1763812

   $('.hws-css-filter-td').click(function () {
      if($(this).hasClass("cell_highlight")){
        $(this).removeClass("cell_highlight");
      }
      else{
         $(this).addClass("cell_highlight");
      }

      $(this).siblings().removeClass("cell_highlight");

   });