JSFiddle - React, Tailwind, and code Playground

by synz izynz

HTML

<table class="tbl-1">
	<tbody>

	    <tr>
	      <td colspan="2" class="emptyrace"></td>
	      <td colspan="6" class="race"><a class="previous" href="#">◄</a><span class="event"></span><a class="next" href="#">►</a></td>
	    </tr>
	    <tr>
	      <td colspan="2" class="raceorder"><strong>Player</strong></td>
	      <td id="r1" data-e1="Event 1" data-e2="Miami - 10:00" class="roundnumber"><strong>E1</strong></td>
	      <td id="r2" data-e1="Event 2" data-e2="Miami - 10:00" class="roundnumber"><strong>E2</strong></td>
	      <td id="r3" data-e1="Event 3" data-e2="Miami - 10:00" class="roundnumber"><strong>E3</strong></td>
	      <td id="r4" data-e1="Event 4" data-e2="Miami - 10:00" class="roundnumber"><strong>E4</strong></td>
	      <td id="r5" data-e1="Event 5" data-e2="Miami - 10:00" class="roundnumber"><strong>E5</strong></td>
	      <td id="r6" data-e1="Event 6" data-e2="Miami - 10:00" class="roundnumber"><strong>E6</strong></td>
	      <td id="r7" data-e1="Event 7" data-e2="Miami - 10:00" class="roundnumber"><strong>E7</strong></td>
	    </tr>
	    <tr class="selectionrow">
	      <td colspan="2">Jeff</td>
	      <td id="r1"><input type="checkbox" name="race1" value="R1"></td>
	      <td id="r2"><input type="checkbox" name="race1" value="R2"></td>
	      <td id="r3"><input type="checkbox" name="race1" value="R3"></td>
	      <td id="r4"><input type="checkbox" name="race1" value="R4"></td>
	      <td id="r5"><input type="checkbox" name="race1" value="R5"></td>
	      <td id="r6"><input type="checkbox" name="race1" value="R6"></td>
	      <td id="r6"><input type="checkbox" name="race1" value="R6"></td>
	    </tr>
	    <tr class="selectionrow">
	      <td colspan="2">Kevin</td>
	      <td id="r1"><input type="checkbox" name="race2" value="R1"></td>
	      <td id="r2"><input type="checkbox" name="race2" value="R2"></td>
	      <td id="r3"><input type="checkbox" name="race2" value="R3"></td>
	      <td id="r4"><input type="checkbox" name="race2"...

CSS

table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;float:none !important;}
table, th, td {vertical-align:middle;}


body {
    font-family: Arial, Sans-Serif;
    font-size: 12px;
    margin: 20px;
}

table {
    width: 578px;
    padding: 0;
    margin: 0;
    cellspacing:0;
}


tr.selectionrow td {
    height: 45px;
    border-bottom: 1px solid #adacac;
}

.bets {
    background: #333333;
    height: 40px;
    color: white;
    text-align: right;
    padding: 0 10px 0 0;
    font-size: 12px;
}

.bets select {
    width: 140px;
}

.length {
    height: 25px;
}

.emptyrace {
    width: 378px;
    background: #dddddd;
    height: 40px;
    border-bottom: 1px solid #adacac;
    border-top: 1px solid #adacac;
}

.race {
    width: 198px;
    height: 40px;
    background: #FFEFC6;
    border: 1px solid gray;
    text-align: center;
    line-height: 12px;
}

a.previous {
    width: 15px;
    height: 17px;
    display: block;
    float: left;
    position: absolute;
    margin: 5px 0 0 10px;
}

a.next {
    width: 15px;
    height: 17px;
    display: block;
    float: right;
    position: absolute;
    margin: -18px 0 0 175px;
}

#r1, #r2, #r3, #r4, #r5, #r6 {
    text-align: center;
}

.raceorder {
    width: 36px;
    background: #dddddd;
    border-right: 1px solid #adacac;
    border-bottom: 1px solid #adacac;
    text-align: center;
    height: 40px;
}

.raceselection {
    width: 341px;
    background: #dddddd;
    padding:  0 0 0 20px;
    border-bottom: 1px solid #adacac;
}

.roundnumber {
    width: 32px;
    height: 45px;
    border-left: 1px solid #adacac;
    border-bottom: 1px solid #adacac;
    background: #dddddd;
    text-align: center;
    
}

.highlighted {
    background: #FFEFC6;
    border: 1px solid gray;
}

JavaScript

$.fn.c_tbl = function(){

		var range 		= parseInt($("tr:eq(0) td:eq(1)",this).attr("colspan")); // range for visiblity(td) based on colspan

		$("tr",this) // Find all tr and its td
		.not("tr:eq(0)").each(function(m,n){
			$(this).find("td:not(:eq(0))").each(function(x,y){
				if(x>=range)
					$(this).hide(); // Hide the rest of the td that outside of range (colspan)
			});
		});

		$(this).highlighted(1); // highlight 1st td (default active, can change to any index.)

		$(".previous",this).on("click",function(e){
			var target 	= $(this).parents("table");
			var active 	= parseInt($("tr:eq(1)",target).find("td.highlighted").index());
			var ind_first_visible 	= parseInt($("tr:eq(1)",target).find("td:not(:eq(0)):visible:first").index());
			var ind_last_visible 	= parseInt($("tr:eq(1)",target).find("td:not(:eq(0)):visible:last").index());

			if(active>1){ // Prevent previous action after reached 1st event

				if(active == ind_last_visible && active !== range){
					$(target).show_td(ind_first_visible-1);
					$(target).hide_td(ind_first_visible+range-1);
				}

				$(target).highlighted(active-1);	
				$("tr",target).not("tr:eq(0)").find("td:eq("+active+")").removeClass("highlighted");

			}

			e.preventDefault();
		});

		$(".next",this).on("click",function(e){
			var target 	= $(this).parents("table");
			var active 	= $("tr:eq(1)",target).find("td.highlighted").index();
			var ind_last_visible 	= $("tr:eq(1)",target).find("td:not(:eq(0)):visible:last").index();

			if(active < $("tr:eq(1)",target).find("td").length-1){ // Prevent next action after reached last event

				if(active == ind_last_visible){
					$(target).show_td(ind_last_visible+1);
					$(target).hide_td(ind_last_visible-range+1);
				}

				$(target).highlighted(active+1);
				$("tr",target).not("tr:eq(0)").find("td:eq("+active+")").removeClass("highlighted");

			}

			e.preventDefault();
		});

	};

	$.fn.highlighted = function(x){
		/*
			x = index of td to be highlighted
			funtion to...