<table class="zebra">
<col>
<col>
<col>
<col>
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr id='row'>
<td>Smith</td>
<td>John</td>
<td>jsmith@gmail.com</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td>fbach@yahoo.com</td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td>jdoe@hotmail.com</td>
<td>$100.00</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>Conway</td>
<td>Tim</td>
<td>tconway@earthlink.net</td>
<td>$50.00</td>
<td>http://www.timconway.com</td>
</tr>
</tbody>
</table>
body {
font: normal medium/1.4 sans-serif;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 0.25rem;
text-align: left;
border: 1px solid #ccc;
}
.hover {
background: yellow;
}
var tds =
document.querySelectorAll("td");
var ths =
document.querySelectorAll("th");
var cells =
Array.prototype.slice.call(tds)
.concat(
Array.prototype.slice.call(ths)
);
var rows =
document.querySelectorAll("tr");
[].forEach.call(
cells,
function(el) {
el.addEventListener(
'mouseover',
function() {
var index = indexInParent(this);
for (var i = 0; i < rows.length; i++) {
var cellsInThisRow = rows[i].getElementsByTagName("td");
if (cellsInThisRow.length == 0) {
cellsInThisRow = rows[i].getElementsByTagName("th");
}
cellsInThisRow[index]
.classList
.add("hover");
};
},
false
);
}
);
[].forEach.call(
cells,
function(el) {
el.addEventListener(
'mouseout',
function() {
for (var i = 0; i < cells.length; i++) {
cells[i]
.classList
.remove("hover");
}
},
false
);
}
);
function indexInParent(node) {
var children = node.parentNode.childNodes;
var num = 0;
for (var i=0; i<children.length; i++) {
if (children[i]==node) return num;
if (children[i].nodeType==1) num++;
}
return -1;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.