[ACCEPTED]-How to make entire td a link?-css
Use CSS.
<style type="text/css">
td a { display: block; width: 100%; height: 100%; }
</style>
<td><a href="#">Link</a></td>
The CSS forces the link to expand 1 to the full width and height of the TD.
You can't wrap a td in an anchor. Do this:
<td id="blue-border"><a href="javascript:chooseStyle('green-theme', 360)"> <span id="blue"></span></a></td>
Or 1
<td onclick="chooseStyle('green-theme', 360)" id="blue-border"><span id="blue"></span></td>
Add an anchor tag inside of the td and set 2 its display attribute to block. This should 1 make the entire td clickable.
#blue-border a{
display: block;
}
or
<a href="link" style="display:block;">
Define an OnClick event for the td:
<td id="blue-border" onclick="chooseStyle('blue-theme', 360)">...
0
If all you're doing is firing javascript, I'd 4 suggest using onclick instead of an anchor tag 3 in the first place, like:
<td id="cell123" onclick="chooseStyle('green-theme',360)">cell contents</td>
You can throw a 2 simple css style on there if you want the 1 mouse to become a pointer:
#cell123:hover { cursor: pointer; }
<table width="100%" class="blueCss">
<tr>
<td ID="tdBlue">
<span id="Blue">Hello</span>
</td>
<td>
<span>other col</span>
</td>
</tr>
</table>
css file:
.blueCss {
height: 100px;
width: 100px;
}
.blueCss td {
background-color: blue;
}
.blueCss:hover {
border-color: #00ae00;
}
.blueCss td:hover {
background-color: yellow;
cursor: pointer;
}
jQuery code:
$(document).ready(function(){
var tdLink = $('#tdBlue');
tdLink.click(function(){
alert('blue-theme');
});
});
Check here: jsFiddle.net
0
Use jquery with class
$("tr td.data_col").click(function() {
window.location = $(this).find('a').attr("href");
});
0
More Related questions
We use cookies to improve the performance of the site. By staying on our site, you agree to the terms of use of cookies.