JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<table id="or-table" class="table table-condensed table-hover table-striped bootgrid-table">
    <thead>
      <tr>
         <th data-column-id="id" data-identifier="true" data-type="numeric">ID</th>
         <th data-column-id="aff" align="center">Affiliation</th>
         <th data-column-id="code">Symbol Code</th>
         <th data-column-id="lat">Latitude</th>
         <th data-column-id="long">Longitude</th>
         <th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th>
         <th data-column-id="long">-</th>
      </tr>
    </thead>
    <tbody>
      <!-- These tr/td generated by Bootgrid: -->
      <tr class='editable' data-row-id="1">
        <td class="select-cell" style="{{ctx.style}}">
        <td class="text-left" style="">1</td>
        <td class="text-left" style="">H</td>
        <td class="text-left" style="">SHG-EVAI-------</td>
        <td class="text-left" style="">35.39135902572556</td>
        <td class="text-left" style="">-116.52048110961914</td>
        <td class="text-left" style=""></td>
        <td class="text-left edit-button" style="">edit</td>
      </tr>
      <tr class='editable' data-row-id="2">
        <td class="select-cell" style="{{ctx.style}}">
        <td class="text-left" style="">2</td>
        <td class="text-left" style="">H</td>
        <td class="text-left" style="">SHG-EVAT-------</td>
        <td class="text-left" style="">35.40241360341436</td>
        <td class="text-left" style="">-116.52648925781249</td>
        <td class="text-left" style=""></td>
        <td class="text-left edit-button" style="">edit</td>
      </tr>      
    </tbody>
</table>

CSS

.edit-button {
  color: tomato;
  
}
.edit-button:hover {
  cursor: pointer;
  color: brown;
}

JavaScript

$(function() {
	$('.edit-button').on('click', function() {
  	$(this).parent().css('background', '#ddd');
  });
});