Table select jQuery 上的单元格颜色突出显示和取消突出显示

Question

我设计了一个表格日历，在 table 主体下包含一堆 TD / TR 元素。

我想要在 table 的每一天进行交互，比如当我点击一个 td 元素（这是一天）时，它会用边框突出显示，当我移动光标并单击其他日期时，这一天会被突出显示，前一个将被取消突出显示。我的代码是这样的，但问题是.off点击功能。它不是取消突出显示，所以所有 table 个单元格都突出显示并持续存在。我如何使用 jQuery 解决这个问题？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>

    $(document).ready(function(){

 $("td.PTDC").on("click",function(){  

  $(this).css("background-color", "#0093e0");
  $(this).css("padding", "5px");
  console.log("onclick");
    }); 

 $("tbody").off("click",function(){  
  $(this).css("background-color", "#ffffff");
  $(this).css("padding", "0px");
  console.log("offclick");
    }); 
});

    </script>

============================ 我在源代码中观察到在点击之前它有：

<td class="PTDC PTLC OOCT" id="db_saw_1883_7_1_6" style="border-style:none;border-right:solid 1px #DADADB;border-bottom:solid 1px #DADADB;">

点击后有：

<td class="PTDC OOCT" id="db_saw_1883_7_1_5" style="border-style: none solid solid none; border-right-width: 1px; border-right-color: rgb(218, 218, 219); border-bottom-width: 1px; border-bottom-color: rgb(218, 218, 219); background-color: rgb(0, 147, 224); padding: 5px;">

但是由于我在日历中的所有 30 天就像每个 td 元素的一天一样，因此很难在单击其他 td 元素时取消关联格式。

Answer 1

$(function(){
$("table tr td").on("click",function(){
    $("td").removeClass("active");
    $(this).addClass("active");
})

})


//CSS

td.active{
  background: blue;
  color: #fff;
}

工作Fiddlehttps://jsfiddle.net/o2gxgz9r/15797/ 您只需要从每个 td 中删除 active class，然后添加到当前点击的 td。

Answer 2

更新 2

OP 正在使用 class 样式无法覆盖的原始应用程序。我从有关工具的各种线索（OP 是模糊的）中推断出它： = 生成...HTML 表 - 它使用内联样式 - 如果是这样，那就可以解释为什么使用 classes 进行样式化非常困难。 - 内联样式（例如 <div style='color:blue'>）不能被样式表中的规则集覆盖，甚至不能被 <style> 块覆盖，但 !important 除外。 演示 3 将演示 2 种处理内联样式属性的方法。

$('td').on('click', function(e) {
  var tgt = e.target;
  e.stopImmediatePropagation();
  $('td').each(function(idx, cell) {
    cell.style.backgroundColor = '#fff';
    cell.style.borderColor = '#000';
    if ($(cell).hasClass('today')) {
      cell.style.backgroundColor = 'rgba(0, 0, 255, 1)';
      cell.style.borderColor = '#aae1ff';
    }
  });
  tgt.style.backgroundColor = '#0093e0';
  tgt.style.borderColor = '#09e';
});

e.target是用户点击的<td>。
e.stopImmediatePropagation(); 防止事件冒泡并被任何其他侦听器听到。
$('td').each(function(idx, cell) {... 每个 <td> 都会有一个函数运行。

每个单元格（即 <td>）的内联样式属性设置为：

 cell.style.backgroundColor = '#fff';

 cell.style.borderColor = '#000';

如果此特定单元格具有 .today class，则：

if ($(cell).hasClass('today')) {
  cell.style.backgroundColor = 'rgba(0, 0, 255, 1)';
  cell.style.borderColor = '#aae1ff';
}

当for循环完成后，改变e.target风格：

 tgt.style.backgroundColor = '#0093e0';

 tgt.style.borderColor = '#09e';

更新 1

我误解了这个问题：OP 期望的行为是一次只有一个单元格可以有 .lit class。这是使用 .addClass()、.removeClass() 和 .not() 的简单修改。参见演示 2。

/* Delegate the click event on all
|| td (cell).
|| Remove the .lit class on every <td>
|| and add .lit class for the clicked <td>
*/
$('td').on('click', function() {
    var that = $(this);
  $('td').not(that).removeClass('lit');
    that.addClass('lit');
});

问题

"...but the problem is the .off click function. It is not unhighlighting so all table cells become highlighted and persists. How could I fix this using jQuery?"

OP 提到的行为称为切换，它能够在 2 "states" 之间来回切换（例如状态处于 off 和 on，或 light 和 dark，等等）。在这种情况下，它是 2 个背景的切换。

.on() 方法是一个函数，它向任何给定的个体或元素组（例如， $('td')）。

.off() 方法是一个函数，它删除任何给定的单个或一组元素的事件侦听器 off。 .off() 不会撤消 .on() 所做的任何事情，.off() 会删除 .on()。所以每 <td> 单击然后丢失注册到它的事件侦听器。

解决方案

避免使用 .css() 方法来设置一组元素的样式
操纵 classes 的效率要高得多。在这个演示中 .lit 是另一个状态，默认状态是 <td> 没有 class .lit
.toggleClass() 是用于执行此操作的方法。

以下演示中的主要功能解决了 OP 解释的问题。作为奖励，我添加了以下功能：

突出显示今天的单元格
为一个月中的每一天生成一个数字

详情在演示中评论

演示 1（切换 Class）

// Make a Date Object
var d = new Date();
// Get today's day as a number
var today = d.getDate();

/* Find the cell at the index number 
|| (which is eq -1) and add thr .today class
*/
$('td').eq(today - 1).addClass('today');

/* On each cell, add the day number, unless
|| the cell has class .empty
*/ // Note: the syntax of string on line 19
// is ES6 Template Literal see post for ref.
$('td').each(function(index, day) {
  if ($(this).hasClass('empty')) {
    return
  }
  $(this).append(`<b>${index+1}</b>`);
});

/* Delegate the click event on all
|| td (cell).
|| callback on each td is to 
|| toggle the .lit class
*/
$('td').on('click', function() {
  $(this).toggleClass('lit');
});

.month {
  table-layout: fixed;
  width: 90%;
  min-height: 250px;
  border-spacing: 1px;
  border: 3px outset grey
}

caption {
  font-variant: small-caps
}

.month td {
  border: 2px inset black;
  background: #fff;
  cursor: pointer;
}

td.lit {
  background-color: #0093e0;
  border-color: #09e;
}

td.today {
  background: rgba(0, 0, 255, 1);
  border-color: #aae1ff;
}

td.today.lit {
  background: tomato;
  border-color: red
}

td b {
  font-size: .3em;
  color: #123;
  vertical-align: top;
  display: inline-block;
  margin: -7px 0 0 -5px;
}

td.today b {
  color: #fff
}

.empty {
  /* Prevents any mouse events 
|| i.e unclickable
*/
  pointer-events: none;
  cursor: default;
}

<table class='month'>
  <caption>October</caption>
  <thead>
    <tr>
      <th>SUN</th>
      <th>MON</th>
      <th>TUE</th>
      <th>WED</th>
      <th>THU</th>
      <th>FRI</th>
      <th>SAT</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td class='empty' colspan='4'>&nbsp;</td>
    </tr>
  </tbody>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

演示 2（独家 Class）

// Make a Date Object
var d = new Date();
// Get today's day as a number
var today = d.getDate();

/* Find the cell at the index number 
|| (which is eq -1) and add thr .today class
*/
$('td').eq(today - 1).addClass('today');

/* On each cell, add the day number, unless
|| the cell has class .empty
*/// Note: the syntax of string on line 19
// is ES6 Template Literal see post for ref.
$('td').each(function(index, day) {
  if ($(this).hasClass('empty')) {
    return
  }
  $(this).append(`<b>${index+1}</b>`);
});

/* Delegate the click event on all
|| td (cell).
|| Remove the .lit class on every <td>
|| and add .lit class for the clicked <td>
*/
$('td').on('click', function() {
 var that = $(this);
  $('td').not(that).removeClass('lit');
 that.addClass('lit');
});

.month {
  table-layout: fixed;
  width: 90%;
  min-height: 250px;
  border-spacing: 1px;
  border: 3px outset grey
}

caption {
  font-variant: small-caps
}

.month td {
  border: 2px inset black;
  background: #fff;
  cursor: pointer;
}

td.lit {
  background-color: #0093e0;
  border-color: #09e;
}

td.today {
  background: rgba(0, 0, 255, 1);
  border-color: #aae1ff;
}

td.today.lit {
  background: tomato;
  border-color: red
}

td b {
  font-size: .3em;
  color: #123;
  vertical-align: top;
  display: inline-block;
  margin: -7px 0 0 -5px;
}

td.today b {
  color: #fff
}

.empty {
/* Prevents any mouse events 
|| i.e unclickable
*/
  pointer-events: none;
  cursor: default;
}

<table class='month'>
  <caption>October</caption>
  <thead>
    <tr>
      <th>SUN</th>
      <th>MON</th>
      <th>TUE</th>
      <th>WED</th>
      <th>THU</th>
      <th>FRI</th>
      <th>SAT</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td class='empty' colspan='4'>&nbsp;</td>
    </tr>
  </tbody>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

演示 3

// Make a Date Object
var d = new Date();
// Get today's day as a number
var today = d.getDate();

/* Find the cell at the index number 
|| (which is eq -1) and add thr .today class
*/
$('td').eq(today - 1).addClass('today');

/* On each cell, add the day number, unless
|| the cell has class .empty
*/ // Note: the syntax of string on line 19
// is ES6 Template Literal see post for ref.
$('td').each(function(index, day) {
  if ($(this).hasClass('empty')) {
    return
  }
  $(this).append(`<b>${index+1}</b>`);
});

/* Delegate the click event on all
|| td (cell).
|| See post update for details
|| 
*/
$('td').on('click', function(e) {
  var tgt = e.target;
  e.stopImmediatePropagation();
  $('td').each(function(idx, cell) {
    cell.style.backgroundColor = '#fff';
    cell.style.borderColor = '#000';
    if ($(cell).hasClass('today')) {
      cell.style.backgroundColor = 'rgba(0, 0, 255, 1)';
      cell.style.borderColor = '#aae1ff';
    }
  });
  tgt.style.backgroundColor = '#0093e0';
  tgt.style.borderColor = '#09e';
});

.month {
  table-layout: fixed;
  width: 90%;
  min-height: 250px;
  border-spacing: 1px;
  border: 3px outset grey
}

caption {
  font-variant: small-caps
}

.month td {
  border: 2px inset black;
  background: #fff;
  cursor: pointer;
}

td.lit {
  background-color: #0093e0;
  border-color: #09e;
}

td.today {
  background: rgba(0, 0, 255, 1);
  border-color: #aae1ff;
}

td.today.lit {
  background: tomato;
  border-color: red
}

td b {
  font-size: .3em;
  color: #123;
  vertical-align: top;
  display: inline-block;
  margin: -7px 0 0 -5px;
  background: rgba(0, 0, 0, 0);
  pointer-events: none;
}

td.today b {
  color: #fff
}

.empty {
  /* Prevents any mouse events 
|| i.e unclickable
*/
  pointer-events: none;
  cursor: default;
}

<table class='month'>
  <caption>October</caption>
  <thead>
    <tr>
      <th>SUN</th>
      <th>MON</th>
      <th>TUE</th>
      <th>WED</th>
      <th>THU</th>
      <th>FRI</th>
      <th>SAT</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td class='empty' colspan='4'>&nbsp;</td>
    </tr>
  </tbody>
</table>














<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

参考

时间 Date(), .getDate()

DOM Collection .eq(), .each()

Class 操纵 .toggleClass(), .addClass(), .removeClass(), .hasClass()

事件委托 .on(), .off()

其他 .append(), ES6 Template Literals .not()

Answer 3

$(function() {
  $("table tr td.PTDC").on("click", function() {
    //This css will be applied across all table td's so make it specific
    $("table tr td").css({
      "background-color": "#fff",
      "border": "1px solid red"
    });
    $(this).css({
      "background-color": "#0093e0",
      "border": "1px solid red"
    });
  })
})

https://jsfiddle.net/o2gxgz9r/15797/

已根据您的代码更新 fiddle。检查这是否满足。但请确保我在通用 table tr td 上应用 CSS，因此请具体化

Table select jQuery 上的单元格颜色突出显示和取消突出显示

Table Cell color highlight and un-highlight on select jQuery

html

jquery

html-table

highlight

cell