Google+ Followers

2016年7月4日 星期一

Bootstrap 筆記 - 讓 table 以 <tr> 為單位支援 click event

這功能其實不難,但順手筆記一下自己選的解法:

<table class="table table-striped table-hover">
<thead>
<tr>
<td cols="3">
<img class="img-responsive" src="something"/>
</td>
</tr>
</thead>
<tbody>
<tr data-href="link">
<td>Data1</td>
<td>Data2</td>
<td><a href="link">Data3</a></td>
</tr>
</tbody>
</table>


搭配 Javascript(jQuery):

<script>
$(document).ready(function() {
$(".table > tbody > tr").css('cursor', 'pointer').click(function() {
var link = $(this).data("href").trim();
if (link.length > 0)
window.document.location = link;
return false;
});
});
</script>


簡單的說,就是在某個 <td> 欄位裡埋入 <a> tag,但在 <tr> 裡的屬性多個 data-href 來記錄,最後再用 Javascript 埋入 <tr> click event。

看起來好像多埋了 <a> tag ,其主因是為了 SEO。

沒有留言:

張貼留言