I am having a table with its table row <tr> generating in a loop to form multiple rows.
I want to give separate <a> link to each <tr>. Since in table we can add only add data to <td> only, I am not able to achieve that.
Is there any other way to achieve this?
Html:
<table>
<tr href=http://myspace.com>
<td>MySpace</td>
</tr>
<tr href=http://apple.com>
<td>Apple</td>
</tr>
<tr href=http://google.com>
<td>Google</td>
</tr>
</table>
JavaScript using jQuery Library:
$(document).ready(function(){
$('table tr').click(function(){
window.location = $(this).attr('href');
return false;
});
});
You can try this here: http://jsbin.com/ikada3
CSS (optional):
table tr {
cursor: pointer;
}
OR the HTML valid version with data-href instead of href:
<table>
<tr data-href=http://myspace.com>
<td>MySpace</td>
</tr>
<tr data-href=http://apple.com>
<td>Apple</td>
</tr>
<tr data-href=http://google.com>
<td>Google</td>
</tr>
</table>
JS:
$(document).ready(function(){
$('table tr').click(function(){
window.location = $(this).data('href');
return false;
});
});
CSS:
table tr[data-href] {
cursor: pointer;
}
