How to find selected row using jQuery?

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>How to find selected row using jQuery?</title>
  <link rel="stylesheet" href="style.css" />
  <script data-require="jquery" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script>
    $(function() {
      $('#userTable').on('click', 'tbody tr', function(event) {
        $(this).addClass('highlight').siblings().removeClass('highlight');
      });

      $('#btnRowClick').click(function(e) {
        var rows = getHighlightRow();
        if (rows != undefined) {
          alert(rows.attr('id'));
        }
      });

      var getHighlightRow = function() {
        return $('table > tbody > tr.highlight');
      }

    });
  </script>
</head>

<body>
  <div>
    <h2>How to find selected row using jQuery?</h2>
  </div>
  <button id="btnRowClick" class="button">Get Selected Row Ids</button><br/>
  <table id="userTable" class="row">
    <tbody>
      <tr style="background-color: #F0F8FF;">
        <th><b>Id</b></th>
        <th><b>Name</b></th>
        <th><b>Age</b></th>
      </tr>
      <tr id="row1">
        <td>1</td>
        <td>Anil</td>
        <td>30</td>
      </tr>
      <tr id="row2">
        <td>2</td>
        <td>Sunil</td>
        <td>27</td>
      </tr>
      <tr id="row3">
        <td>3</td>
        <td>Sushil</td>
        <td>24</td>
      </tr>
    </tbody>
  </table>
  <a href="http://www.code-sample.com/" target="_blanck">click for more detail...</a>
</body>

</html>

td,
th {
  border: 1px solid #999;
  padding: 1.5rem;
}

.row tbody tr.highlight td {
  background-color: #ccc;
}

.button {
  border-top: 1px solid #96d1f8;
  background: #65a9d7;
  background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
  background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
  background: -moz-linear-gradient(top, #3e779d, #65a9d7);
  background: -ms-linear-gradient(top, #3e779d, #65a9d7);
  background: -o-linear-gradient(top, #3e779d, #65a9d7);
  padding: 5px 10px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
  -moz-box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
  box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
  text-shadow: rgba(0, 0, 0, .4) 0 1px 0;
  color: white;
  font-size: 23px;
  font-family: Helvetica, Arial, Sans-Serif;
  text-decoration: none;
  vertical-align: middle;
}

.button:hover {
  border-top-color: #28597a;
  background: #28597a;
  color: #ccc;
}

.button:active {
  border-top-color: #1b435e;
  background: #1b435e;
}