要讓表格 `<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 實現。
沒有留言:
張貼留言