Table row ID on click

Retrieve the ID of a table row when clicked on

by Jonathan Swart

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<table id="animals">
  <tr id="cat">
    <td>
      Cat
    </td>
  </tr>
  <tr id="dog">
    <td>
      Dog
    </td>
  </tr>
</table>

CSS

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

JavaScript

$(document).ready(function() {
    $(document).on("click", "#animals tbody tr", function() {
    		var animal = $(this).closest('tr').attr('id');
        alert("I am a " + animal);
    });
});