Clickable table rows

by cryberg

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button">
  Start here!
</button>

<table id="userTable">
  <caption class="sr-only">User Directory. Press enter on a table row to access more details</caption>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Birthday</th>
      <th scope="col">Phone Number</th>
    </tr>
  </thead>
  <tbody>
    <tr tabindex="0">
      <td>Jack</td>
      <td>January 5th</td>
      <td>123456789</td>
    </tr>
    <tr tabindex="0">
      <td>Jill</td>
      <td>February 12th</td>
      <td>789456123</td>
    </tr>
    <tr tabindex="0">
      <td>Jessie</td>
      <td>September 8th</td>
      <td>555555555</td>
    </tr>
  </tbody>
</table>

<!-- <div id="tableInstructions">
  Press enter on a table row to access more details.
</div> -->

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        Additional details...
      </div>
    </div>
  </div>
</div>

CSS

table {
  border-collapse: collapse;
  width: 100%;
}

table, th, td {
  border: 1px solid #e7e7e7;
}

tr th {
  background-color: #f8f8f8;
}

JavaScript

var userTable = document.getElementById('userTable');

function openModal(e) {
	if(!/(13|1|32)/.test(e.which)) return;
	$('#myModal').modal('toggle');
}

$('tr[tabindex]').click(openModal);
$('tr[tabindex]').on('keydown', openModal);