JSFiddle - React, Tailwind, and code Playground

by yunowork

HTML

<table>
  <tbody>

    <tr>
      <td colspan="2" class="emptyrace"></td>
      <td colspan="6" class="race"><a class="previous" href="#">Prev</a> <strong>Race 1</strong><br /> San Francisco <a class="next" href="#">Next</a></td>

    </tr>
    <tr>
      <td class="raceorder"><strong>No.</strong></td>
      <td class="raceselection"><strong>Player</strong></td>
      <td id="r1" class="highlighted roundnumber"><strong>R1</strong></td>
      <td id="r2" class="roundnumber"><strong>R2</strong></td>
      <td id="r3" class="roundnumber"><strong>R3</strong></td>
      <td id="r4" class="roundnumber"><strong>R4</strong></td>
      <td id="r5" class="roundnumber"><strong>R5</strong></td>
      <td id="r6" class="roundnumber"><strong>R6</strong></td>
    </tr>
    <tr class="selectionrow">
      <td>1</td>
      <td>Paul</td>
      <td class="highlighted" 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>
    </tr>
    <tr class="selectionrow">
      <td>2</td>
      <td>David</td>
      <td class="highlighted" 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" value="R4"></td>
      <td id="r5"><input type="checkbox" name="race2" value="R5"></td>
      <td id="r6"><input type="checkbox" name="race2" value="R6"></td>
    </tr>
    
    
    <tr class="selectionrow">
      <td>2</td>
      <td>James</td>
      <td class="highlighted" id="r1"><input type="checkbox" name="race2" value="R1"></td>
      <td...

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;
    padding: 1px 0 1px 0;
}

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

.race {
    width: 198px;
    height: 40px;
    background: #ffc190;
    border: 1px solid #ef8b3c;
    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 165px;
}

#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: #ffc190;
    border: 1px solid #ef8b3c;
}

JavaScript

/* NEXT TD HIGHTLIGHT */ 
$(".next").click(function(e){
    e.preventDefault();
    var $nextCol = $('.highlighted').next('td');
    if($nextCol.length != 0){
        $('.highlighted').removeClass("highlighted");
        $nextCol.addClass("highlighted");
    }else{
        
    }
});
   
/* PREVIOUS TD HIGHTLIGHT */ 
$(".previous").click(function(e){
    e.preventDefault();
    var $prevCol = $('.highlighted').prev('td');
    if($prevCol.length != 0){
        $('.highlighted').removeClass("highlighted");
        $prevCol.addClass("highlighted");
    }
});