0

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

我需要做的是，当我将鼠标悬停在其中一张桌子上时：

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

当我离开桌子时：

  1. 隐藏除第一行之外的所有行
  2. 从最后一行中删除“CellRed”
  3. 将“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>
4

2 回答 2

2

试试这个：

$(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();
    });
})

演示在这里

于 2013-09-13T14:44:35.407 回答
1

你可以做：

$(".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();
});
于 2013-09-13T14:45:16.893 回答