点击TR标签切换背景色时第三次点击无法显示颜色的问题如何解决

你嵌套绑定了click事件，jQuery的事件绑定是累加生效的，不会覆盖之前绑定的同类型事件，每次点击.tr都会新增一个重置背景的click处理函数，多次点击后多个事件同时触发，导致你刚设置的随机背景色立刻被后续触发的重置事件覆盖，所以第三次及之后点击看起来没有效果。
逐次点击的执行逻辑如下：

• 第一次点击：仅触发初始绑定的事件，设置随机色正常，同时新增1个重置背景的事件绑定
• 第二次点击：先触发初始事件设置随机色，再触发第一次新增的重置事件，背景清空符合预期，同时新增第2个重置事件绑定
• 第三次点击：先触发初始事件设置随机色，再依次触发前两次绑定的2个重置事件，随机色立刻被覆盖，看起来无效果

不要嵌套绑定click事件，把选中/取消的逻辑合并到同一个事件处理函数中即可，推荐用自定义类标记选中状态，避免判断CSS属性的兼容性问题，修复后的代码如下：

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}
$('.tr').click(function() {
  if ($(this).hasClass('active-tr')) {
    // 当前行已选中，点击取消高亮
    $(this).removeClass('active-tr').css("background-color", "initial");
  } else {
    // 先清空所有其他行的选中状态
    $('.tr.active-tr').removeClass('active-tr').css("background-color", "initial");
    // 给当前行设置随机高亮色
    $(this).addClass('active-tr').css("background-color", getRandomColor());
  }
})

你的HTML代码不需要做任何修改，直接替换JS部分即可正常实现需求：首次点击高亮、第二次点击取消高亮、后续点击循环生效，同时点击其他行会自动取消上一行的高亮状态。

内容的提问来源于stack exchange，提问作者smmmm