如何使表格行可点击？

<style>
  tr:hover {
    cursor: pointer;
  }
</style>

<table>
  <tr onclick="handleRowClick()">
    <td>行1</td>
    <td>数据1</td>
  </tr>
  <tr onclick="handleRowClick()">
    <td>行2</td>
    <td>数据2</td>
  </tr>
</table>

<script>
  function handleRowClick() {
    // 处理行点击事件的逻辑
  }
</script>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<style>
  tr:hover {
    cursor: pointer;
  }
</style>

<table>
  <tr class="clickable-row">
    <td>行1</td>
    <td>数据1</td>
  </tr>
  <tr class="clickable-row">
    <td>行2</td>
    <td>数据2</td>
  </tr>
</table>

<script>
  $(document).ready(function() {
    $(".clickable-row").click(function() {
      // 处理行点击事件的逻辑
    });
  });
</script>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>

<style>
  tr:hover {
    cursor: pointer;
  }
</style>

<div id="app">
  <table>
    <tr v-for="item in items" @click="handleRowClick(item)">
      <td>{{ item.row }}</td>
      <td>{{ item.data }}</td>
    </tr>
  </table>
</div>

<script>
  new Vue({
    el: "#app",
    data: {
      items: [
        { row: "行1", data: "数据1" },
        { row: "行2", data: "数据2" }
      ]
    },
    methods: {
      handleRowClick(item) {
        // 处理行点击事件的逻辑
      }
    }
  });
</script>