表格仅在 tbody 中突出显示答案

【问题标题】：Table highlights only in tbody表格仅在 tbody 中突出显示
【发布时间】：2009-04-30 21:08:28
【问题描述】：

我有几个页面与每个页面上的几个表格有关。我有 JQUERY 在偶数线上做斑马条纹并在悬停时改变颜色。但是，它来了，它改变了 THEAD 和 TFOOT 的颜色，我不能将 css 应用于 TFOOT 来改变颜色。

这是代码

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $(function() {
        $('tr').hover(function() {
            $(this).css('background-color', '#FFFF99');
        },
        function() {
            $(this).css('background-color', '');
        });
    });
});

$(function() {
    $("table.tiger-stripe tr:odd").addClass("oddrow");
});
</script>

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

仅将条带化应用于表 tbody

$(function() { 
    $('table.tiger-stripe tbody tr').hover(
        function() { $(this).css('background-color','#FFFF99'); }, 
        function() { $(this).css('background-color', '#000000');}

    );       
    $("table.tiger-stripe tbody tr:odd").addClass("oddrow");  
 });

【讨论】：

感谢您的快速回复，我是使用 jquery 的新手，并且一直在复制和粘贴代码的元素来获得它，我已经订购了一本书来掌握它，关于如何做你给出的答案的任何指示？
我已经整理了你的代码并将其全部放在一个函数中，该函数将在 DOM 加载时执行 - 这是 $(function { ... });包装内部 jQuery 选择器的代码
嗨，Russ，再次感谢，它非常有效，我不得不取出 #000000 颜色，因为它留下黑色后记，将它留在 '' 处返回原始条纹颜色。我不知道这是否是“好的脚本”。非常感谢 - 仅仅弄清楚这一点就花了 5 个小时......
无论如何都可以得到它，以便在多张桌子上它总是以相同的颜色开头 - 我读过 .child 但不知道放在哪里？？？？
如果你想在所有具有相同布局的表上使用它，那么只需执行 $('tbody tr').hover(... 和 $('tbody tr:odd').addClass(.. .

【解决方案2】：

请问我们可以查看您的表格代码吗？您确定 tfoot 中有不止一个 tr 行吗，因为 :odd 只会在交替行上触发，因此必须至少存在两行。

哦，你的意思是你不想要触发 tfoot？

在这种情况下，只需使用 $('tbody tr:odd') 作为您的选择器。

【讨论】：

嗨，感谢您尝试过的回复，它现在可以让我设置thead 和 tfoot 的样式，但是当我将鼠标悬停时仍然会突出显示...任何想法？？？
它将拾取 tbody 中所有奇数的 tr 行。请更具体地说明它何时突出显示以及您希望它何时突出显示。 Russ 发布的代码有效吗？

【解决方案3】：

谢谢大家....

这就是代码的样子......

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
</script><script type="text/javascript">
$(function() {
           $('table.tiger-stripe tbody tr').hover(
                function() { $(this).css('background-    color','#FFFF99'); },
                function() { $(this).css('background-    color', '');}    );
           $("table.tiger-stripe tbody tr:nth-child(even)").addClass    ("oddrow");   });

</script>

【讨论】：

谢谢你，但 tbody 中没有数据，它低于 tfoot，这通常不是正确的方法。试试我上面给出的答案中的代码。
我知道你的帖子发生了什么。发布代码时，您需要确保每行缩进四个空格，这样才能确定它是一个代码块。
当您需要在问题中添加代码或新信息时，只需单击问题下方的“编辑”即可在新的详细信息中进行编辑。请仅将答案用于实际回答问题（甚至是您自己的问题）。 :)
@stu，我建议删除此“答案”并编辑您的原始问题以添加此附加详细信息