使用 jQuery 将表格单元格的背景更改为不同的颜色答案

【问题标题】：Changing the background of table cells to different colors with jQuery使用 jQuery 将表格单元格的背景更改为不同的颜色
【发布时间】：2012-12-11 19:49:35
【问题描述】：

我有一张这样的桌子：

我想在单击它们时更改带有价格的单元格的背景颜色（例如 addClass(on) ），如左下角所示，并且还更改其他单元格的背景颜色也是（例如 addClass(off) ）。

我不希望其他单元格受到影响（带有文本和不同颜色的单元格）。

我还需要获取点击的单元格所属行的id。

这是一行的结构。

<tr class="taksit" id="tek">
    <td><b>Tek Çekim</b></td>
    <td><?=$sontutar?> TL</td>
    <td><?=$sontutar?> TL</td>
    <td><?=$sontutar?> TL</td>
    <td><?=$sontutar?> TL</td>
    <td><?=$sontutar?> TL</td>
    <td><?=$sontutar?> TL</td>
    <td><?=$sontutar?> TL</td>
</tr>

我尝试了一些在这里找到的技巧，但无法做到。知道我该怎么做吗？

【问题讨论】：

请显示代表 HTML（您图片中的表格），不是生成它的服务器端脚本：jQuery 工作 client-side，服务器端发生的事情几乎完全无关紧要。

标签： jquery css

【解决方案1】：

$('table#uniqueID tbody td').on('click',function() {
    $(this).closest('tbody').find('td').removeClass('highlight');
    $(this).addClass('highlight');
});

【讨论】：

它可以工作，但是这段代码也改变了顶部彩色单元格的背景。
更新为关注tbody 而不是整个表格。您可能需要在一对 <thead> 标记中显式包装包含这些彩色单元格的行。
像魅力一样工作，非常感谢。但是，我怎样才能获取最近行的 id 呢？我需要获取“tek”值并将其提供给变量。
api.jquery.com/closest -- 要检索 ID，请使用 $(this).closest('tr').attr('id')
太好了。再次感谢。还有一件事，我是否能够排除没有价值的单元格（显示为“-”）？当我单击没有值的单元格时，我不希望有任何颜色变化。这可能吗？

【解决方案2】：

$("#table_selector td.clickable").on('click',function(){
  // cache $(this)
  var clickedElement = $(this);

  // remove background color from other clickable items 
  $("td.clickable").css('background','none');

  // change the background color of the clicked <td>    
  clickedElement.css('background','red');

  var rowId = clickedElement.closest('tr').attr('id');
});

让我稍微解释一下我在这里做了什么。
首先，您说您不希望每个<td> 都受到这些点击和背景变化的影响。因此，您应该为所有“可点击”的<td> 提供一个类，然后您可以将on('click') 事件限制为您想要的元素。你当然也可以做相反的事情，为你想忽略的类添加一个“noClick”类......

可以通过几种方式更改<td> 的背景颜色，为了举例，我选择使用简单的.css('background','red');，但我相信您在实际操作中有更多逻辑代码。

rowId 是通过使用 closest() 函数查找最接近的父元素 <tr> 来提取的。然后简单地查看id 属性。

【讨论】：