The fact that the link is display block makes it follow its own vertical alignment rules. A block level element cannot innately have vertical alignment.
If we use a DOCTYPE that forces standards compliance, we can make its display table-cell:
Code:
<!DOCTYPE html>
<html>
<head><style type="text/css">
td a {
display: table-cell;
height: 100%;
vertical-align: middle;
}
td {
height: 65px;
}
</style>
</head>
<body>
<table id="mstrTable" width="100%";>
<tr style="background-color: #fff">
<td>
<a href="#">Link1</a>
</td>
</tr>
<tr style="background-color: #fff">
<td>
<a href="#">Link2</a>
</td>
</tr>
<tr style="background-color: #fff">
<td>
<a href="#">Link3</a>
</td>
</tr>
</table>
<script type="text/javascript" />
(function() {
var color = "#f00";
var rows = document.getElementById("mstrTable").getElementsByTagName("tr");
var n = rows.length;
var bgcs = [];
for(var i=0; i<n; ++i) bgcs[i] = rows[i].style.backgroundColor;
rows[0].style.backgroundColor = color;
function changeColor(e) {
if(!e) e = window.event;
var o = e.target? e.target: e.srcElement;
while(o.tagName && o.tagName.toLowerCase()!="tr") o = o.parentNode;
for(var i=0; i<n; ++i) {
rows[i].style.backgroundColor = bgcs[i];
if(rows[i]==o) rows[i].style.backgroundColor = color;
}
}
if(document.addEventListener) for(var i=0; i<n; ++i) rows[i].addEventListener("click", changeColor, false);
else for(var i=0; i<n; ++i) rows[i].attachEvent("onclick", changeColor);
})();
</script>
</body>
</html>
And it will respect the vertical alignment. But the link will no longer occupy the entire cell or row in the case of a single cell in the row as you have it. Using width 100% on the link for some reason (probably the table-cell display allows it only to be the width of its content) will not fix that. You had said you wanted that, but I think that's counterproductive. If the link occupies the entire cell/row, then the color change, if seen at all, will be very brief before the link fires.
But you may have other plans for the link or have it be to a named anchor on the page. We can make clicking on the cell do the same thing as clicking on the link would do, but unless that's to fire normally, I would need to know your plans for the link in order to carry that out properly.
However, if you just want the link to fire as a normal link (to another page or to a named anchor on the same page) when the row is clicked on, these changes to the javascript can accomplish that:
Code:
(function() {
var color = "#f00";
var rows = document.getElementById("mstrTable").getElementsByTagName("tr");
var n = rows.length;
var bgcs = [];
for(var i=0; i<n; ++i) {
bgcs[i] = rows[i].style.backgroundColor;
rows[i].style.cursor = 'pointer';
rows[i].onclick = function(){
location = this.getElementsByTagName('a')[0].href;
};
}
rows[0].style.backgroundColor = color;
function changeColor(e) {
if(!e) e = window.event;
var o = e.target? e.target: e.srcElement;
while(o.tagName && o.tagName.toLowerCase()!="tr") o = o.parentNode;
for(var i=0; i<n; ++i) {
rows[i].style.backgroundColor = bgcs[i];
if(rows[i]==o) rows[i].style.backgroundColor = color;
}
}
if(document.addEventListener) for(var i=0; i<n; ++i) rows[i].addEventListener("click", changeColor, false);
else for(var i=0; i<n; ++i) rows[i].attachEvent("onclick", changeColor);
})();
Reply With Quote
Originally Posted by riptide
Bookmarks