JSFiddle - React, Tailwind, and code Playground

by Mahendran Sakkarai

HTML

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<div>
  <button>:nth-child(even)</button>
  <button>:nth-child(odd)</button>
  <button>:nth-child(3n)</button>
  <button>:nth-child(2)</button>
</div>
<div>
  <button>:nth-child(3n+1)</button>
  <button>:nth-child(3n+2)</button>
  <button>:even</button>
  <button>:odd</button>
</div>
 
<div>
  <table>
    <tr><td>John</td><td>John</td></tr>
    <tr><td>Karl</td><td>John</td></tr>
    <tr><td>Brandon</td><td>John</td></tr>
    <tr><td>Benjamin</td><td>John</td></tr>
  </table>
</div>
<div>
  <table>
    <tr><td>Sam</td><td>John</td></tr>
  </table>
</div>
<div>
  <table>
    <tr><td>Glen</td><td>John</td></tr>
    <tr><td>Tane</td><td>John</td></tr>
    <tr><td>Ralph</td><td>John</td></tr>
    <tr><td>David</td><td>John</td></tr>
    <tr><td>Mike</td><td>John</td></tr>
    <tr><td>Dan</td><td>John</td></tr>
  </table>
</div>
 
<span>tr<span id="inner"></span></span>

CSS

button {
    display: block;
    font-size: 12px;
    width: 100px;
  }
  div {
    float: left;
    margin: 10px;
    font-size: 10px;
    border: 1px solid black;
  }
  span {
    color: blue;
    font-size: 18px;
  }
  #inner {
    color: red;
  }
  td {
    width: 50px;
    text-align: center;
  }

JavaScript

$( "button" ).click(function() {
  var str = $( this ).text();
  $( "tr td" ).css( "background", "white" );
  $( "tr td" + str ).css( "background", "#ff0000" );
  console.log($( "tr td" + str ).text());
  $( "#inner" ).text( str );
});