JSFiddle - React, Tailwind, and code Playground

by salitrapraveen

HTML

<div>

</div>

CSS

table {
    width: 80%;
 border: 1px solid black;    
}

tr {
 border-top: 1px solid black;
 border-bottom: 1px solid black;    
 cursor: pointer;
}
tr:hover,
tr.selected{
 background-color: #08D4CD;   
}
td {
    text-align: left;
     border-right: 1px solid black;  
    padding: 2px;
}

JavaScript

$(function() {
    var load = function() {
        var $table = $('<table/>').appendTo($('div'));
        for (var i = 0; i < 10; i++) {
            var $tr = $('<tr/>'),
                $inputCB = $('<input/>').attr('type', 'checkbox').prop('checked', false).click(function(event) {
                    $(this).parent().parent().toggleClass('selected');
                });
            $('<td/>').css('width', '20%').append($inputCB).appendTo($tr);
            $('<td/>').text(i).appendTo($tr);

            $($tr).click(function(event) {
                selectRow(event, this, $table);            
            });
            $tr.appendTo($table);
        }


    };

    var selectRow = function(event, tr, container) {
        if (event.target.type !== 'checkbox') {
            if (event.ctrlKey) {
                $(':checkbox', tr).trigger('click');
            } else {
                if ($(':checkbox', tr).prop("checked") && $(':checkbox:checked', container).length == 1) {
                    $(':checkbox', tr).trigger('click');
                }
                else {
                    $(':checkbox:checked', container).trigger('click');
                    $(':checkbox', tr).trigger('click');
                }

            }
        }
    };

    load();
});