JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCKTYPE html>
<html>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  </head>

  <body>
    <div>
      <table id="myTable">
        <thead>
          <tr>
            <th></th>
            <th>name</th>
            <th>id</th>
            <th>remark</th>
            <th>status</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <input type="checkbox"/>
            </td>
            <td>Test</td>
            <td>235</td>
            <td>add</td>
            <td>D</td>
          </tr>
          <tr>
            <td>
              <input type="checkbox"/>
            </td>
            <td>Test</td>
            <td>123</td>
            <td>add</td>
            <td>A</td>
          </tr>
          <tr>
            <td>
              <input type="checkbox"/>
            </td>
            <td>Test</td>
            <td>235</td>
            <td>add</td>
            <td>D</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>

</html>

CSS

#myTable tbody tr:hover {
  background: #eee;
  text-align: center;
}

#myTable tbody tr {
  text-align: center;
}

JavaScript

$(function() {
  $('input:checkbox').change(function() {
    var maxAllowed = 2;
    var cnt = $('input:checkbox:checked').length;
    if (cnt > maxAllowed) {
      $(this).prop("checked", "");
    }
  });
});

$(function() {
  $('#myTable tr').click(function(event) {
    if (event.target.type !== 'checkbox') {
      $(':checkbox', this).trigger('click');
    }
  });
});