JSFiddle - React, Tailwind, and code Playground

by refan

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>First name</th>
      <th>Last name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Refan</td>
      <td>Köprücü</td>
      <td>Software Developer</td>
      <td>Antalya</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>First name</th>
      <th>Last name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </tfoot>
</table>

JavaScript

$(document).ready(function() {

  var selected = [];
  var table = $('#example').DataTable();
  
  $('#example tbody').on('click', 'tr', function() {
    
    //data you need to send to server
    var fname = $(this).find("td").eq(0).html();
    var lname = $(this).find("td").eq(1).html();

    alert(fname + " " + lname);

    //var id = this.id;
    var index = $.inArray(fname, selected);

    if (index === -1) {
      selected.push(fname);

      //Send to server-side
      // more at: http://api.jquery.com/jquery.post/
      $.post("test.php", { fname: fname, lname: lname })
        .done(function() {
          alert("second success");
        })
        .fail(function() {
          alert("error");
        })
        .always(function() {
          alert("finished");
        });;


    } else {
      selected.splice(index, 1);
    }

    $(this).toggleClass('selected');
  });
});