javascript - Select row on table

Question

I have a table below my search input like below:

how to select the appropriate item from the list below using the arrows on the keyboard? additionally, it would be good if the currently selected element had a different color

here is my code:

<div class="relative flex w-full flex-wrap items-stretch" style="width: 450px;">
          <span
            class="z-10 h-full leading-snug font-normal absolute text-center text-gray-400 absolute bg-transparent rounded text-base items-center justify-center w-8 pl-3 py-3"
          >
            <i class="fas fa-search"></i>
          </span>
          <input
            v-model.trim="searchBy"
            @keyup.enter="getAllDatas"
            type="text"
            placeholder="Find more data..."
            class="px-3 py-3 placeholder-gray-400 text-gray-700 relative bg-white bg-white rounded text-sm shadow outline-none focus:outline-none focus:shadow-outline w-full pl-10"
          />
          <br />
          <table class="v-full" style="border: 1px solid #333;width: 450px;border-radius:5%;">
            <tbody>
              <tr v-for="r in data.items" :key="r.id">
                <td style="border: 1px solid #333;background-color: #ffffff;" v-on:click="getData(r.id)">{{ r.name }}</td>
              </tr>
            </tbody>
          </table>
        </div>

I have no idea how to do this :(

thanks for any help

Answer 1

等待大神答复