JSFiddle - React, Tailwind, and code Playground

by Vinit Divekar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="show">
  <tr>
    <th>Name</th>
    <th>Is Online</th>
    <th>Is Offline</th>
    <th>Comment</th>
  </tr>
</table>

CSS

div.dot {
    width : 20px;
    height : 20px;
    border-radius : 50%;
}

div.green-dot{
    background-color : green;
}

div.red-dot{
    background-color : red;
}

JavaScript

$(document).ready(function(){

var row = $('<tr></tr>');

$('<td></td>').appendTo($(row)).html('John');
$('<td></td>').appendTo($(row)).html(getDot('IN'));
$('<td></td>').appendTo($(row)).html(getDot(''));
$('<td></td>').appendTo($(row)).html('Test');

var row2 = $('<tr></tr>');
$('<td></td>').appendTo($(row2)).html('Doe');
$('<td></td>').appendTo($(row2)).html(getDot(''));
$('<td></td>').appendTo($(row2)).html(getDot('OUT'));
$('<td></td>').appendTo($(row2)).html('Test');

$('#show').append($(row));
$('#show').append($(row2));


});

function getDot(data){
	var div = '';
    if(data) {
      div = $('<div class="dot"></div>');
      if(data == 'IN') {
          $(div).addClass('green-dot');
      } else if(data == 'OUT') {
          $(div).addClass('red-dot');
      }
    }
    return div;

}