jQuery設置鼠標懸停的tr邊框w /嵌套表

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/

從外部表中刪除「SearchResult所」級，並嘗試這個JS：

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