Question

我有一个问题，当它有一个嵌套表时，让tr更改边框。有人可以帮我解决这个问题。

这是我的表结构

<table class="SearchResults" cellpadding="0" cellspacing="0" id="tblResultsHTML">
<tbody>
        <tr class="BlackHeader">
    <td>header here</td>
        </tr>
        <tr>
    <td>
                <table class="SearchResults" cellpadding="2" cellspacing="0" width="100%">
        <tbody>
                        <tr class="GroupHeader">
            <td>group 1</td>
            </tr>
                        <tr>
            <td width="75%">sub 1</td>
                            <td valign="top">sub 2</td>
            </tr>
            </tbody>
               </table>
           </td>
   </tr>
       <tr>
    <td>
                 <table class="SearchResults" cellpadding="2" cellspacing="0" width="100%">
        <tbody>
                        <tr class="GroupHeader">
            <td>group 2</td>
            </tr>
                        <tr>
            <td width="75%">sub 1</td>
                            <td valign="top">sub 2</td>
            </tr>
            </tbody>
               </table>
            </td>
   </tr>
   </tbody>
</table>

当我没有嵌套表时，我的jquery是这个

    $('#tblResultsHTML').live("mouseover mouseout", function (event) {
    if (event.type == "mouseover") {
        $(this).contents('td').css({ 'border': '2px solid black', 'border-left': 'none', 'border-right': 'none' });
        $(this).contents('td:first').css('border-left', '2px solid black');
        $(this).contents('td:last').css('border-right', '2px solid black');
    } else {
        $(this).contents('td').css('border', 'none');
    }
});

我想要发生的是，当我将鼠标悬停时，包含嵌套表的整行都有一个边框。因此，如果我将鼠标放在第1组上，则该行中的整个嵌套表将具有边框。这有道理吗??

由于

Answer 1

http://jsfiddle.net/dQgXF/2/

从外表中删除“SearchResults”类并尝试使用此JS：

$('.SearchResults').live(
    {
        mouseover: function() {
            $(this).parent().css({
                border:'2px solid black',
            });
        },
        mouseout: function() {
            $(this).parent().css({
                border:0,
            });
        },
    });

jQuery在鼠标悬停时设置带有嵌套表格的tr边框

1 个答案: