<table>
  <thead>
    <tr>
      <th></th>
      <th>Name</th>
      <th>Email</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr data-userid="1">
      <td>
        <input type="checkbox" data-action="select">
      </td>
      <td>John Doe</td>
      <td>[email protected]</td>
      <td>
        <button type="button" data-action="edit">Edit</button>
        <button type="button" data-action="delete">Delete</button>
      </td>
    </tr>
    <tr data-userid="2">
      <td>
        <input type="checkbox" data-action="select">
      </td>
      <td>Jane Smith</td>
      <td>[email protected]</td>
      <td>
        <button type="button" data-action="edit">Edit</button>
        <button type="button" data-action="delete">Delete</button>
      </td>
    </tr>
    <tr data-userid="3">
      <td>
        <input type="checkbox" data-action="select">
      </td>
      <td>George Westminster</td>
      <td>[email protected]</td>
      <td>
        <button type="button" data-action="edit">Edit</button>
        <button type="button" data-action="delete">Delete</button>
      </td>
    </tr>
    <tr data-userid="4">
      <td>
        <input type="checkbox" data-action="select">
      </td>
      <td>Will Johnson</td>
      <td>[email protected]</td>
      <td>
        <button type="button" data-action="edit">Edit</button>
        <button type="button" data-action="delete">Delete</button>
      </td>
    </tr>
  </tbody>
</table>

body {
  margin: unset;
  font: normal 14px/1.5 "Open Sans", sans-serif;
  color: #444;
  background-color: lightblue;
  padding: 1rem;
}

input[type="checkbox"] {
  margin: unset;
}

table {
  max-width: 70vw;
  margin: auto;
  border-collapse: collapse;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
}

th {
  text-align: left;
  padding: 10px;
  background-color: rgba(0, 0, 0, .15);
}

td {
  background-color: white;
  padding: 10px;
}

tr:not(:last-of-type) td {
  border-bottom: 1px solid #ddd;
}

(function() {
  "use strict";
  
  function getUserId(target) {
    return target.closest("[data-userid]").dataset.userid;
  }
  
  function handleClick(evt) {
    var { action } = evt.target.dataset;
    
    if (action) {
      let userId = getUserId(evt.target);
      
      if (action == "edit") {
        alert(`Edit user with ID of ${userId}`);
      } else if (action == "delete") {
        alert(`Delete user with ID of ${userId}`);
      } else if (action == "select") {
        alert(`Selected user with ID of ${userId}`);
      }
    }
  }
  
  window.addEventListener("click", handleClick);
})();