Question

我有一个行表，在点击时“展开”（通过在点击的行之后插入一个新行），我使用css对行中的单元格进行斑马式设置以及“突出显示”当一行悬停在上面时，单元格的样式。

我希望插入的行具有与所单击行相同的背景颜色。

我正在尝试使用jQuery中插入行的单元格的backgroundColor，使用单击行中第一个单元格的backgroundColor属性。

然而，当我这样做时，我得到了'突出显示'颜色，因为我徘徊在点击的行上 - 我想要非悬停值。

的CSS：

.zebra-striped tbody tr:nth-child(odd) td {
    background-color: #f9f9f9;
}
.zebra-striped tbody tr:hover td {
    background-color: #f5f5f5;
}

jQuery的：

table.find('tbody').find('tr').on('click',function() {
    var colourOfRow = $(this).find("td").filter(":first").css('backgroundColor');
    var newRows = $('<tr><td style="background-color:'+colourOfRow+';" colspan="'+numCols+'" rowspan="2">Fetching comment...</td></tr><tr></tr>');
    newRows.insertAfter($(this));
});

我确信我可以通过在需要使用之前存储颜色来解决这个问题，但我的问题是：

是否有我错过的jQuery选择器或其他一些众所周知的技巧？

Answer 1

不，你不能这样做。不。

更新颜色/样式的更好方法是添加/删除类。在CSS中定义样式，然后添加/删除类以使显示确认。

尝试通过比较jQuery中的信息来切换状态是很古怪的！

Answer 2

为什么不采用+2或-2行相同单元格的背景颜色？如果只有一行，您可以添加更多行获取颜色并快速删除它们。我认为最好的方法是为奇数和偶数元素保存颜色，并在以后需要时使用它们。但是又一次（我不确定是这种情况）如果你在点击已经添加的行后添加一行会给你带来另一个问题：）

Answer 3

以下是我现在解决的问题（感谢@Mathletics和@szym的答案）：

tableRows.each(function(index){
    $(this).data('oc', $(this).find("td").filter(":first").css('backgroundColor'));
});

然后当我在行上下文中需要那种颜色时：

var colourOfRow = $(this).data('oc');

可能不是最高性能的解决方案，但我认为已经足够好了。

如果有人有个好主意，我会暂时搁置这个问题。

获取当前正在悬停的元素的非悬停css backgroundColor prop

3 个答案: