如何设置<td:active>为不同颜色的<TR>背景色？
如何设置<td:active>为不同颜色的<TR>背景色？
提问于 2019-03-04 06:57:55
在将“活动”类添加到特定<td>单元格的事件期间，当该事件发生时，我希望将<tr>背景设置为不同的颜色。现在，我只能在 <td:active>之后设置所有的<td>单元格。我还想在 <td:active>之前设置<td>单元格，从而使整行更改为不同的背景色。
表结构：
<table>
<tr>
<td style="background: yellow"></td>
<td style="background: yellow"></td>
<td style="background: yellow"></td>
</tr>
<tr>
<td style="background: yellow"></td>
<td style="background: yellow"></td>
<td style="background: yellow"></td>
</tr>
<tr>
<td style="background: yellow"></td>
<td style="background: yellow"></td>
<td style="background: yellow"></td>
</tr>
</table>预期的：当某些事件发生时
<table>
<tr>
<td style="background: yellow"></td>
<td style="background: yellow"></td>
<td style="background: yellow"></td>
</tr>
<tr> <!-- applied new css during the event -->
<td style="background: blue"></td>
<td class="active" style="background: blue"></td>
<td style="background: blue"></td>
</tr>
<tr>
<td style="background: yellow"></td>
<td style="background: yellow"></td>
<td style="background: yellow"></td>
</tr>
</table>Actual:当事件发生时
<table>
<tr>
<td style="background: yellow"></td>
<td style="background: yellow"></td>
<td style="background: yellow"></td>
</tr>
<tr> <!-- applied new css during the event -->
<td style="background: yellow"></td>
<td class="active" style="background: blue"></td>
<td style="background: blue"></td>
</tr>
<tr>
<td style="background: yellow"></td>
<td style="background: yellow"></td>
<td style="background: yellow"></td>
</tr>
</table>我想在事件发生时修复当前的css样式(以实现“预期”)，但我不知道它的任何正确的css逻辑/语法。
回答 2
Stack Overflow用户
发布于 2019-03-04 09:08:03
我使用了蓝色(‘$('td.active').parent().children().css('background'，’)；然后它就像我预期的那样工作了。
Stack Overflow用户
发布于 2019-03-04 09:23:24
由于您没有任何代码可供我们使用，这里有一个我刚刚编造的小示例。与其向td中添加类，不如将其添加到tr中？这将使得通过CSS处理它变得很容易。有了这个，您可以定义多个类，并根据您的偏好/要求进行添加。
下面的示例是向tr添加一个类，其余的工作由CSS完成：
$(document).ready(function() {
$( 'table tr' ).hover(function() {
$('table tr').removeClass('active');
$(this).addClass('active');
});
});td{background-color:#ff0;}
tr.active td{background-color:#f00;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
上面的代码目前可以在鼠标悬停状态下运行，但如果需要，您可以将其更改为单击。
干杯
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54974647
复制相关文章
相似问题