2023/09/08

讓表格整行 tr 可以被選取

 要讓表格 `<table>` 中的整行 `<tr>` 可以點擊跳轉到超連結,可以使用 JavaScript 或者 jQuery 實現,具體步驟如下:


1. 給每個要點擊的 `<tr>` 加上一個 `data-href` 屬性,該屬性的值為要跳轉的超連結地址,例如:


<table class="table">

  <tbody>

    <tr data-href="https://www.example.com">

      <td>表格內容 1</td>

      <td>表格內容 2</td>

      <td>表格內容 3</td>

    </tr>

    <tr data-href="https://www.example.com">

      <td>表格內容 4</td>

      <td>表格內容 5</td>

      <td>表格內容 6</td>

    </tr>

  </tbody>

</table>


2. 使用 JavaScript 或者 jQuery 監聽每個有 `data-href` 屬性的 `<tr>` 元素的點擊事件,獲取 `data-href` 屬性的值並將頁面跳轉到對應的超連結地址,例如:


<script>

  // 使用 JavaScript 實現

  var tableRows = document.querySelectorAll('tr[data-href]');

  tableRows.forEach(function(row) {

    row.addEventListener('click', function() {

      window.location.href = this.dataset.href;

    });

  });


  // 使用 jQuery 實現

  $('tr[data-href]').click(function() {

    window.location.href = $(this).data('href');

  });

</script>


以上就是讓表格 `<table>` 中的整列 `<tr>` 可以點擊跳轉到超連結的方法,可以根據實際情況進行選擇使用 JavaScript 或者 jQuery 實現。

沒有留言:

張貼留言