JSFiddle - React, Tailwind, and code Playground

by Nick Craver

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<link rel="stylesheet" href="http://dandenney.com/dev/jasmultiplication/presentation/mobile.css">
        <section id="content"> 
                
            <aside> 
            
                <table id="multiplication"> 
                    
                    <tr class="horizontal-set"> 
                        <td class="horizontal-one">1</td> 
                        <td class="horizontal-two">2</td> 
                        <td class="horizontal-three">3</td> 
                        <td class="horizontal-four">4</td> 
                        <td class="horizontal-five">5</td> 
                        <td class="horizontal-six">6</td> 
                        <td class="horizontal-seven">7</td> 
                        <td class="horizontal-eight">8</td> 
                        <td class="horizontal-nine">9</td> 
                        <td class="horizontal-ten">10</td> 
                    </tr> 
                    <tr class="row-two"> 
                        <td class="vertical-two">2</td> 
                        <td class="twoxtwo">4</td> 
                        <td class="twoxthree">6</td> 
                        <td class="twoxfour">8</td> 
                        <td class="twoxfive">10</td> 
                        <td class="twoxsix">12</td> 
                        <td class="twoxseven">14</td> 
                        <td class="twoxeight">16</td> 
                        <td class="twoxnine">18</td> 
                        <td class="twoxten">20</td> 
                    </tr> 
                    <tr class="row-three"> 
                        <td class="vertical-three">3</td> 
                        <td class="threextwo">6</td> 
                        <td class="threexthree">9</td> 
                        <td class="threexfour">12</td> 
                        <td class="threexfive">15</td> 
                        <td...

JavaScript

$(function() {
    $("#multiplication").delegate("tr:gt(0) td:not(:first-child)", "hover", function() {        
    $(this).toggleClass("choice").prevAll().toggleClass("horizontal-trail")
     .end().closest('tr').prevAll().find('td:nth-child(' + ($(this).index()+1) + ')')
                                   .toggleClass('vertical-trail');
  });
});