JSFiddle - React, Tailwind, and code Playground

by john_rock

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Table</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
    <div id="wrapper">
        <!-- codes for table start -->
        <!-- table-hanging start -->
        <table class="table-hanging" 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">Round</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
                   ...

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-hanging").hover(function(){ 
var index_new=$(this).index();
$(".table-hanging:eq("+index_new+") td[rowspan]").removeClass("big-column");
$(".table-hanging:eq("+index_new+") tr:eq(1)").hover(function(){
$(".table-hanging:eq("+index_new+") tr:eq(1)").find('td[rowspan]').addClass("new-child");
});

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

});