jquery - 选择 jQuery 的表格单元格颜色突出显示和取消突出显示

Question

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

我希望在表格的每一天进行交互，例如当我单击一个 td 元素(即一天)时，它将用边框突出显示，当我移动光标并单击其他一天时，这一天将突出显示，而前一天将被取消-突出显示。我的代码是这样的，但问题是 .off 点击功能。它不是取消突出显示，因此所有表格单元格都会突出显示并保留。我如何使用 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

更新 2

OP 正在使用类样式无法覆盖的原始应用程序。我从有关工具的各种线索中推断出(OP 含糊不清):
= 生成...HTML 表格
- 它使用内联样式
- 如果是这样，那么这将解释为什么使用类进行样式设计非常困难。
- 内联样式(例如 <div style='color:blue'> )不能被样式表中的规则集覆盖，甚至不能被 <style> 覆盖 block 与 !important 是异常(exception)。 演示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类，然后:

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 个“状态”之间来回切换的能力(例如，状态处于关闭和打开状态，或明暗状态等)。在这种情况下，它是 2 个背景的切换。

.on() 方法是一个添加事件监听器的函数 在 任何给定的个人或一组元素(例如 $('td') )。

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

解决方案

避免使用 .css()设置一组元素样式的方法

操作类的效率要高得多。在此演示中 .lit是另一个状态，默认状态是 <td>无类.lit

.toggleClass() 是用于执行此操作的方法。

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

今日单元格亮点

为每月的每一天生成一个数字

详情见demo

演示 1(切换类)

// 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>

Demo 2(专属类)

// 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 集合
.eq() ,
.each()

类操作
.toggleClass() ,
.addClass() ,
.removeClass() ,
.hasClass()

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

杂项
.append() ,
ES6 Template Literals
.not()