JSFiddle - React, Tailwind, and code Playground

by acjackson911

HTML

<script type="text/javascript">
  $(document).ready(function() {
    $('#example tbody').on('click', 'td', function() {
     alert('Data:' + $(this).html().trim() + '\nRow:' + $(this).parent().find('td').html().trim() + '\nColumn:' + $('#example thead tr th').eq($(this).index()).html().trim());
     
    });
  });

</script>



<table cellspacing="0" width="100%" class="display nowrap dataTable dtr-inline" id="example" role="grid" aria-describedby="example_info" style="width: 100%;">
  <thead>
    <tr role="row">
      <th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 133px;" aria-sort="ascending" aria-label="Name: activate to sort column descending">
        Name
      </th>
      <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 224px;" aria-label="Position: activate to sort column ascending">
        Position
      </th>
      <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 100px;" aria-label="Office: activate to sort column ascending">
        Office
      </th>
      <th class="dt-body-right sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 41px;" aria-label="Age: activate to sort column ascending">
        Age
      </th>
      <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 92px;" aria-label="Start date: activate to sort column ascending">
        Start date
      </th>
      <th class="dt-body-right sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 77px;" aria-label="Salary: activate to sort column ascending">
        Salary
      </th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th rowspan="1" colspan="1">
        Name
      </th>
      <th rowspan="1" colspan="1">
        Position
      </th>
      <th rowspan="1" colspan="1">
        Office
      </th>
      <th class="dt-body-right" rowspan="1"...

CSS

#example tbody tr td {
  border: 1px solid black
}