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。