Navigate HTML table rows with javascript

I have an HTML table that has an onclick event in the first column in each row that will load content when pressed. I want to navigate through the table with the up and down arrow keys and when I press enter, fire off the oncliick event. I do not need to navigate cells, just the rows to highlight the row so you know which row's content is being displayed. Heres my table:

<table class="table_id">
    <thead style="background: #DAE6F0;">
      <th width="49"></th>
      <th width="106">Location</th>
      <th width="107">SelectionType</th>
    </thead>
    <tbody>
    @foreach (var item in Model.List)
    {
      <tr>
        <td style="width: 49px;"><a onclick=" getTeplate(@item.Id); ">Display</a></td>
        <td style="width: 120px; text-align: center">@Html.DisplayFor(modelItem => item.AdvertisementLocation)</td>
        <td style="width: 107px; text-align: center">@Html.DisplayFor(modelItem => item.AdvertisementSelectionType)</td>
      </tr>
    }
      </tbody>
  </table>

My CSS is set up to make the table a set height with a scroll bar:

tbody {
      border-collapse: collapse;
      overflow: auto;
      max-height: 486px;
}

thead, tbody {
      border-collapse: collapse;
      border: 1px solid black;
      display: block;
}

th {

    border: 1px solid black;
    font-size: 1.3em;
    text-align: center;
    padding-left: 0;
}

I would like to do this all with JS. Andy Help?