JSFiddle - React, Tailwind, and code Playground

by k_rma

HTML

<form id="form1">
    <div>
        <table id="tbl" border="1">
            <thead id=tblhead>
                <tr>
                    <th>               </th>
                    <th class="r90"><span>Name</span>
                    </th>
                    <th class="r90"><span>City</span>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr id=tbl1>
                    <td>1</td>
                    <td>Amit</td>
                    <td>Dehri</td>
                </tr>
                <tr id=tbl2>
                    <td>2</td>
                    <td>Mishra</td>
                    <td>Buxar</td>
                </tr>
                <tr id=tbl3>
                    <td>3</td>
                    <td>Anand</td>
                    <td>Aurangabad</td>
                </tr>
                <tr id=tbl4>
                    <td>4</td>
                    <td>Sharma</td>
                    <td>Kuju</td>
                </tr>
                <tr id=tbl5>
                    <td>5</td>
                    <td>Ashutosh</td>
                    <td>Hagipur</td>
                </tr>
            </tbody>
        </table>
    </div>
</form>

CSS

.whiteRow {
    background: #FFFFFF
}
.colorRow {
    background: #FF00FF
}
.whiteCell {
    background: #FFFFFF
}
.colorCell {
    background: #00FF00
}
.r90 span {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    font-family:verdana;
    display:inline-block;
}

JavaScript

$(document).ready(function () {
    
    var maxSpanHeight = 0;
    $(".r90 span").each(function(){
        if (maxSpanHeight < $(this).width())
            maxSpanHeight = $(this).width();
    }).css({
        'height':maxSpanHeight,
        'line-height':maxSpanHeight+'px'
    });
    
    $("#tbl tr").addClass("whiteRow");
    $('#tbl tbody td')
        .on("click", function () {
        //Get table cell id and alert user
        var $cell = $(this);
        var $tdid = $cell.attr("id")
        var $trow = $cell.parents('tr:first');
        var $trid = $trow.attr("id");
        var $thid = $cell.closest('table').find('th').eq($cell.index());

        alert("ID: " + $trow.find("td:first").text() + " , Value: " + $cell.text() + ",  Header: " + $thid.text());
    })
        .mouseover(function () {
        //Get table cell id and alert user
        var $cell = $(this);
        var $tdid = $cell.attr("id")
        var $trow = $cell.parents('tr:first');
        var $trid = $trow.attr("id");

        if ($('#' + $trid).hasClass("whiteRow")) {
            $('#' + $trid).removeClass('whiteRow').addClass('colorRow');
        }
    })
        .mouseout(function () {
        var $cell = $(this);
        var $tdid = $cell.attr("id")
        var $trow = $cell.parents('tr:first');
        var $trid = $trow.attr("id");

        if ($('#' + $trid).hasClass("colorRow")) {
            $('#' + $trid).removeClass('colorRow').addClass('whiteRow');
        }
    });
});