JSFiddle - React, Tailwind, and code Playground

by andinfo

HTML

<table width="100%" border="0" cellspacing="0" cellpadding="0" id="primary_table">
  <tr id="1">
    <td>1</td>
  </tr>
  <tr id="2">
    <td>2</td>
  </tr>
  <tr id="3">
    <td>3</td>
  </tr>
  <tr id="4">
    <td>4</td>
  </tr>
  <tr id="5">
    <td>5</td>
  </tr>
  <tr id="6">
    <td>6</td>
  </tr>
  <tr id="7">
    <td>7</td>
  </tr>
  <tr id="8">
    <td>8</td>
  </tr>
  <tr id="9">
    <td>9</td>
  </tr>
  <tr id="10">
    <td>10</td>
  </tr>
  <tr id="11">
    <td>11</td>
  </tr>
  <tr id="12">
    <td>12</td>
  </tr>
  <tr id="13">
    <td>13</td>
  </tr>
</table>

CSS

.red{
    border: 1px solid red;}

.black{
    border: 1px solid #000;}

JavaScript

var tooltip = function() {

    var tooltips_tr = $('#primary_table tr');
    var tooltips_amount = $(tooltips_tr).length;
    var x = 1;

    for (i = 0; i < tooltips_amount; i++) {
        var tooltips_id = $('#primary_table tr#' + x);

        if (x < 6) {
            $(tooltips_id).addClass('red');
        } else if (x > tooltips_amount-5) {
            $(tooltips_id).addClass('blue');
        } else {
            // else
        }
        x++;
    }
}

tooltip();