JSFiddle - React, Tailwind, and code Playground

by kentaromiura

HTML

<table id="test">
    <tbody>
        <tr><td><div class="spezzato"><span>A</span><span>B</span></div></td></tr>
        <tr><td><div class="spezzato"><span>C</span><span>D</span></div></td></tr>
    </tbody>
</table>

CSS

#test{
    border:1px solid black;
    padding:1em;
    margin:1em;
    background-color:gainsboro;
    width:200px;
    height:400px;
}
#test tr{
    width:100%;
}
#test span{
    display:table-cell;
}
#test td{
padding:0.3em;
    border-bottom:1px solid silver;
    font-family:Calibri;
    cursor:pointer;
}
.spezzato{
display:table-row;
    vertical-align:middle;
}
.spezzato span{
    display:table-cell;
    float:left;
    vertical-align:middle;
    whitespace:nowrap;
    position:relative;
    padding-left:1.6em;
    padding-right:0.4em;
    border-right:1px solid gray;
    border-radius:1.5em;
}
.selected{
background-color:steelblue;
}
.hover{
background-color:lightsteelblue;
}

JavaScript

var tabella = $('test');
var lastSelected = null;
tabella.addEvent('click:relay(td)', function(event, target){
    if(lastSelected){
        lastSelected.removeClass('selected');    
    }
    lastSelected = target;
    target.addClass('selected');
});
tabella.addEvent('mouseenter:relay(tr)', function(event, target){
    target.addClass('hover')
});    

tabella.addEvent('mouseleave:relay(tr)', function(event, target){
    target.removeClass('hover')
});