Question

我有几张桌子（两张桌子，但可能更多）。它们每个都有不同的行数。在PHP中，我计算每个表中需要显示哪一行（下面标记为class="CellRed"），其他行标记为class="rowHidden"。

我需要做的是，当我将鼠标悬停在其中一个表格上时：

显示该表的所有行（但不显示其他表）
从包含它的行中删除'CellRed'
将'CellRed'添加到最后一行

当我离开桌子时：

隐藏除第一行以外的所有行
从最后一行删除'CellRed'
将'CellRed'添加到第一行

我正在尝试避免在每个表中添加ID，因为预先知道表的数量。

我到目前为止，但现在我被卡住了。任何帮助将不胜感激。

<html>
<head>
    <script language="JavaScript" src="../Generic/JAVASCRIPT/jquery.js" type="text/javascript"></script>
    <style>
        table{ border: 3px solid #000000; display:inline-block}
        th{ border-width: 2px; border-color: #000000; border-style: solid; background-color: #CFCFCF; color: #000000; }
        td{ border-width: 2px; border-color: #000000; border-style: solid; }
        .rowHidden {display:none; }
        .CellRed {background-color:red; }
    </style>
    <script>
$(document).ready(function()
{   
    $('table.tabResult',this).hover(function()
        {   
            //console.log(this);
            $('tr',this).removeClass('CellRed');
            $('tr').show();
            $('tr:last').addClass('CellRed');
        },  
        function()
        {
            //console.log(this);
            $('tr').removeClass('CellRed');
            $('tr').hide();
            $('tr:first').addClass('CellRed').show();
        }
    );

}
)

    </script>
</head>
<body>
    <table class="tabResult"> 
        <thead>  
            <tr class="hdr">   
                <th>TABLE1</th>  
            </tr> 
        </thead> 
        <tbody>  
            <tr class="CellRed"> <td>11001</td> </tr>
            <tr class="rowhidden"> <td>11002</td> </tr>
            <tr class="rowhidden"> <td>11003</td> </tr>
            <tr class="rowhidden"> <td>11004</td> </tr>
            <tr class="rowhidden"> <td>11005</td> </tr>
            <tr class="rowhidden"> <td>11006</td> </tr>
        </tbody>
    </table>

    <table class="tabResult"> 
        <thead>  
            <tr class="hdr">   
                <th>TABLE2</th>  
            </tr> 
        </thead> 
        <tbody>  
            <tr class="rowhidden"> <td>11001</td> </tr>
            <tr class="rowhidden"> <td>11002</td> </tr>
            <tr class="CellRed"> <td>11003</td> </tr>
            <tr class="rowhidden"> <td>11004</td> </tr>
        </tbody>
    </table>
</body>
</html>

Answer 1

试试这个：

$(document).ready(function () {
    $('table.tabResult').hover(function () {
       //console.log(this);
        $(this).find('tr').removeClass('CellRed');
        $(this).find('tr').show();
        $('tr:last').addClass('CellRed');
    },

    function () {
        //console.log(this);
        $(this).find('tr').removeClass('CellRed');
        $(this).find('tr:not(".hdr")').hide();
        $('tr:first').addClass('CellRed').show();
    });
})

演示here

Answer 2

你可以这样做：

$(".tabResult").hover(function() {
    $(this).find("tbody tr").removeClass("CellRed rowhidden");
    $(this).find("tbody tr:last").addClass("CellRed");
    $(this).find("tbody tr").show();
}, function() {
    var first = $(this).find("tbody tr:first");
    first.addClass("CellRed");
    $(this).find("tbody tr").not(first).addClass("rowhidden");
    $(this).find("tbody tr").hide();
});

显示/隐藏当前所选表的表行

2 个答案: