JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style type="text/css">
.new-child {
background:none !important;
}
.born-child {
background:#d0dafd !important;
}
</style>
<div id="wrapper">

<table class="table-4" summary="products">

            <colgroup>

                <col class="column-odd" />

                <col class="column-even" />

                <col class="column-odd" />

                <col class="column-even" />

                <col class="column-odd" />

                <col class="column-even" />

                <col class="column-odd" />

                <col class="column-even" />

            </colgroup>

            <thead>

                <tr>

                    <th scope="col" class="header-odd">Tapered Triangle</th>

                    <th scope="col" class="header-even">Diameter<br/> 8'</th>

                    <th scope="col" class="header-odd">Diameter<br/>10'</th>

                    <th scope="col" class="header-even">Diameter<br/>12'</th>

                    <th scope="col" class="header-odd">Diameter<br/>14'</th>

                    <th scope="col" class="header-even">Diameter<br/>15'</th>

                    <th scope="col" class="header-odd">Diameter<br/>16'</th>

                    <th scope="col" class="header-even">Instruction</th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <td>24''</td>

                    <td><a href="#"><img src="http://abidhasan.zxq.net/table/images/round-btn.gif" width="38" height="29" alt="Trade Show Round Hanging Sign" /><br/>

                    <span>$1640</span><br/>

                    On Sale:<br/>

                    $1378

                    </a></td>

                    <td><a href="#"><img src="http://abidhasan.zxq.net/table/images/round-btn.gif" width="38" height="29" alt="Trade Show Round Hanging Sign" /><br/>

                   ...

CSS

@charset "utf-8";
/* CSS Document */

body { margin: 0; padding: 0; text-align: center; }

#wrapper { margin: 0 auto; width: 900px; text-align: left; }

/* ----------------- styling for the tables ------------------   */
.table-1 { font-family: sans-serif; font-size: 12px; margin: 20px; width: 520px; text-align: center; border-collapse: collapse; }
.table-1 th { font-size: 14px; font-weight: normal; padding: 12px 15px; border-right: 1px solid #fff; border-left: 1px solid #fff; color: #042D40; }
.table-1 td { padding: 11px 15px; border-right: 1px solid #fff; border-left: 1px solid #fff; border-bottom: 1px solid #fff; color: #669; }
.table-1 .column-odd { background: #eff2ff; }
.table-1 .column-even { background: #e8edff; }
.table-1 .header-odd { background: #d0dafd; border-bottom: 1px solid #c8d4fd; }
.table-1 .header-even { background: #dce4ff; border-bottom: 1px solid #d6dfff; }
.table-1 tr:hover td { background: #d0dafd; color: #009; }
.table-1 a { border: none; text-decoration: none; color: #669; }
.table-1 a:hover { color: #009; }


.table-2 { font-family: sans-serif; font-size: 12px; margin: 20px 3px; width: 660px; text-align: center; border-collapse: collapse; }
.table-2 th { font-size: 14px; font-weight: normal; padding: 12px 15px; border-right: 1px solid #fff; border-left: 1px solid #fff; color: #042D40; }
.table-2 td { padding: 11px 15px; border-right: 1px solid #fff; border-left: 1px solid #fff; border-bottom: 1px solid #fff; color: #669; }
.table-2 .column-odd { background: #eff2ff; }
.table-2 .column-even { background: #e8edff; }
.table-2 .header-odd { background: #d0dafd; border-bottom: 1px solid #c8d4fd; }
.table-2 .header-even { background: #dce4ff; border-bottom: 1px solid #d6dfff; }
.table-2 tr:hover td { background: #d0dafd; color: #009; }
.table-2 a { border: none; text-decoration: none; color: #669; }
.table-2 a:hover { color: #009; }


.table-3 { font-family: sans-serif; font-size: 12px; margin: 20px; width: 215px; text-align: center;...

JavaScript

$(document).ready(function() {

$(".table-4 tr:eq(1)").hover(function(){
$(".table-4 tr:eq(1)").find('td[rowspan]').addClass("new-child");
});

$(".table-4 tr:eq(1) td[rowspan]").hover(function(){ 
$(".table-4 tr:eq(1) td").addClass("new-child");  
$(".table-4 tr:eq(1) td[rowspan]").removeClass("new-child");
$(".table-4 tr:eq(1) td[rowspan]").addClass("born-child");
},
function () {
$(".table-4 tr:eq(1) td").removeClass("new-child");
$(".table-4 tr:eq(1) td[rowspan]").removeClass("born-child");
}
);

});