JSFiddle - React, Tailwind, and code Playground

by jloureiro09

HTML

<table>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
</table>

<input id="fadeInAll" type="button" value="Fade in all rows" />
<br />
<input id="fadeOutFirst" type="button" value="Fade out 1st row" />
<input id="fadeInFirst" type="button" value="Fade in 1st row" />
<br />
<input id="fadeOutSelected" type="button" value="Fade out selected rows" />

CSS

tr:nth-child(even) {background: red}
tr:nth-child(odd) {background: green}
table{
    width: 100%
}
tr{
    cursor: pointer;
}
tr.selected td{
    border: 5px solid #000;
}

JavaScript

$("tr").bind("fadeOut", function(){
    $(this).hide(500);
}).bind("fadeIn", function(){
    $(this).show(500);
}).click(function(){
    var $this = $(this);
    if($this.hasClass("selected"))
        $this.removeClass("selected");
    else
        $this.addClass("selected");
});

$("#fadeInAll").click(function(){
    $("tr").trigger("fadeIn");
});

$("#fadeOutFirst").click(function(){
    $("tr:first").trigger("fadeOut");
});
$("#fadeInFirst").click(function(){
    $("tr:first").trigger("fadeIn");
});

$("#fadeOutSelected").click(function(){
    $("tr.selected").trigger("fadeOut");
});