jQuery addClass example

Change class name on click in jQuery

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.jqueryui.min.css">
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.jqueryui.min.js"></script>
<table id="table">
  <thead>
    <th>
      email
    </th>
    <th>
      first_name
    </th>
    <th>
      last_name
    </th>
    <th>
      avatar
    </th>
  </thead>
  <tbody>
  </tbody>
</table>

CSS

.overlay {
  opacity: 0.3;
  background-color: black;
  position: absolute;
}

JavaScript

$("#table").DataTable({
	dom: '<"fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-tl ui-corner-tr"<"smartid-datatable-header">flrB>' +
            't' +
            '<"fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-bl ui-corner-br"ip>',
  ajax: {
  	url: "https://reqres.in/api/users?page=2",
    type: "GET",
    contentType: 'application/json; charset=utf-8',
    dataType: "JSON",
    dataSrc: function(data) {
    	// Comment out below line for Firefox workaround
    	/* setTimeout(
    	        function () {
    	          $("#table").DataTable().draw();
    	        },
    	        50); */
    	return data.data;
    }
  },
  initComplete: function() {
  	this.api().draw();
  },
  columns: [
  	{
    	data: "email"
    },
    {
    	data: "first_name"
    },
    {
    	data: "last_name"
    },
    {
    	data: "avatar"
    },
  ],
  drawCallback: function(settings) {
  	let api = this.api();
    if (api.data().count() > 1) {
      if ($(".overlay") != null) {
        $(".overlay").remove();
      }
      let row = api.row(1);
      let rowSelector = $(row.node());
      let pos = rowSelector.position();
      let overlay = $("<div class='overlay'>test</div>");
      overlay.css("top", pos.top);
      overlay.css("left", pos.left);
      overlay.css("width", rowSelector.width());
      overlay.css("height", rowSelector.height());
      rowSelector.append(overlay);
    }
  },
	scrollY: "700px"  
});