JSFiddle - React, Tailwind, and code Playground

by rustyjeans

HTML

<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>

JavaScript

$(function () {
    $('#tblResultsHTML tr').find('+').live("mouseover mouseout", function (event) {
        if (event.type == "mouseover") {
            $(this).css('border', '2px solid black');
        } else {
            $(this).css('border', 'none');
        }
    });
});