We Keep Coding

How to make child rows column clickable?

I have a HTML table in which there are child rows , I want to make those child rows column clickable to perform particular action.
I have parent rows and when I click on those rows, child rows are being shown, in which there is a column col2 , on which when I click it should perform some action for each child rows column.
I want col2 of child row to be clickable to show some more information using JavaScript and HTML. I don't know, but on click function(onclick('col2')) something like that can be helpfull or not??
var $container = $("#container");
var $row = $("#container table tbody tr");
// Loop through items in JSON data..
var $button = $("<button>" + 'abc' + "</button>");
$container.prepend($button);
var table = $("<table>");
table.append($("<tr><th>col1</th><th>col2</th></tr>"));
// Button click handler..
$button.on("click", function() {
for (var i = 0; i < 2; i++) {
// Replace row HTML..
//parent row
var row = $('<tr class="parent_row" ><td>' + 'data' + '</td>' + +'<td>' + "" + '</td></tr>');
table.append(row);
for (var j = 0; j < 2; j++) {
//child row
var row = $('<tr style="display: none"><td>' + "" + '</td>' + '<td>' + 'data' + '</td></tr>');
table.append(row);
}
}
$("#table").html(table);
$('.parent_row').click(function() {
$(this).nextUntil(".parent_row").toggle();
})
// Show table if it's not already visible..
});
table {
margin-top: 20px;
border: 1px solid silver;
width: 500px;
}
th {
text-align: left;
}
button {
margin-left: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="table">
</div>
</div>

To catch clicks on any column in a table, simply add a click listener to all cells in that column:
const column2cells = document.querySelectorAll('#table tr>*:nth-child(2)');
for (const cell of column2cells) {
cell.addEventListener('click', function(event) {
console.log(`You clicked cell [${cell.cellIndex}, ${cell.parentElement.rowIndex}] with content "${cell.textContent}"`);
})
}
<table id="table">
<tr>
<th>Col 1</th>
<th>Col 2</th>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
</table>
As a note for the logging output: Remember cellIndex and rowIndex start at 0, not at 1.

var $container = $("#container");
var $row = $("#container table tbody tr");
// Loop through items in JSON data..
var $button = $("<button>" + 'abc' + "</button>");
$container.prepend($button);
var table = $("<table>");
table.append($("<tr><th>col1</th><th>col2</th></tr>"));
// Button click handler..
$button.on("click", function() {
for (var i = 0; i < 2; i++) {
// Replace row HTML..
//parent row
var row = $('<tr class="parent_row" ><td>' + 'data' + '</td>' + +'<td>' + "" + '</td></tr>');
table.append(row);
for (var j = 0; j < 2; j++) {
//child row
var row = $('<tr style="display: none"><td>' + "" + '</td></tr>');
$('<td>data</td>')
.on('click', function() { alert('some action') })
.appendTo(row);
table.append(row);
}
}
$("#table").html(table);
$('.parent_row').click(function() {
$(this).nextUntil(".parent_row").toggle();
})
// Show table if it's not already visible..
});
table {
margin-top: 20px;
border: 1px solid silver;
width: 500px;
}
th {
text-align: left;
}
button {
margin-left: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="table">
</div>
</div>

You could give a specific class name to each <td> in col2 when you are creating them, and then using a regular onclick event based on that class name.
So:
var row = $('<tr class="parent_row" ><td>' + 'data' + '</td>' + +'<td class="col2">' + "" + '</td></tr>');
And then:
$(".col2").on("click", function() {
//whatever you want to do here
});

document.getElementById() doesnt work properly

I have 20 unique random numbers and check between 6 unique numbers.
the first check works, but after refreshing the 6 unique numbers, of the numbers return undefined.
I've given the full code so people can tinker with it.
no need for CSS, that is just to identify different numbers.
sorry for the long codes, it's just how i keep my code tidy.
var num = [];
var com = [];
var s = 0;
var j = 0;
function twenty() {
for (i = 0; i < 20; i++) {
com[i] = Math.floor(Math.random() * 49) + 1;
var x = com.length;
x = x - 1;
for (y = 0; y < x; y++) {
var t1 = com[y];
var t2 = com[i]
while (t1 == t2) {
com[x] = Math.floor(Math.random() * 49) + 1;
t1 = com[x];
}
}
}
for (i = 0; i < 5; i++) {
for (t = 0; t < 4; t++) {
document.getElementsByClassName(t)[i].innerHTML = com[s];
s++;
}
}
}
function calc() {
num = [];
var out = "";
var z = document.getElementById('max').value;
for (i = 0; i < z; i++) {
num[i] = Math.floor(Math.random() * 49) + 1;
var x = num.length;
x = x - 1;
for (y = 0; y < x; y++) {
var t1 = num[y];
var t2 = num[i]
while (t1 == t2) {
num[x] = Math.floor(Math.random() * 49) + 1;
t1 = num[x];
}
}
out += num[i] + ", ";
}
document.getElementById('num').innerHTML = out;
}
function check() {
s = 0;
if (j == 0) {
for (i = 0; i < 5; i++) {
for (t = 0; t < 4; t++) {
var set = 0;
var test1 = document.getElementsByClassName(t)[i].innerHTML;
var y = num.length;
for (x = 0; x < y; x++) {
var comp = num[x];
if (test1 == comp) {
set = 1;
}
if (set == 1) {
document.getElementsByClassName(t)[i].innerHTML = "<input type='button' value = '" + com[s] + "' id='" + s + "' class='yes' >";
} else if (test1 == undefined) {
document.getElementsByClassName(t)[i].innerHTML = "undefined";
} else {
document.getElementsByClassName(t)[i].innerHTML = "<input type='button' value = '" + com[s] + "' id='" + s + "' class='no' >";
}
}
s++;
}
}
j = 1;
} else {
for (i = 0; i < 5; i++) {
for (t = 0; t < 4; t++) {
var set = 0;
var test1 = document.getElementById(s).value;
var y = num.length;
for (x = 0; x < y; x++) {
var comp = num[x];
if (test1 == comp) {
set = 1;
}
if (set == 1) {
document.getElementsByClassName(t)[i].innerHTML = "<input type='button' value = '" + com[s] + "' id='" + s + "' class='yes' >";
} else if (test1 == undefined) {
document.getElementsByClassName(t)[i].innerHTML = "undefined";
} else {
document.getElementsByClassName(t)[i].innerHTML = "<input type='button' value = '" + com[s] + "' id='" + s + "' class='no' >";
}
}
s++;
}
}
}
}
html{
}
input[type=button].yes{
background: green;
border: none;
}
input[type=button].no{
background: red;
border: none;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<script src='code.js'></script>
</head>
<body onload='twenty()'>
<h1>lottery randomizer</h1>
<table border='1'>
<tr>
<td>randomize numbers
</td>
<td>choose number of random numbers
</td>
</tr>
<tr>
<td>
<input type='button' onclick='calc()' value='randomize'>
</td>
<td>
<input type='number' value='6' id='max'>
</td>
</tr>
</table>
<table>
<tr>
<td>
your numbers are:
<div id='num'>
</div>
</td>
</tr>
</table>
<table border='1' class='table'>
<tr>
<td>
<div class='0' id='1'>
</div>
</td>
<td>
<div class='0' id='2'>
</div>
</td>
<td>
<div class='0' id='3'>
</div>
</td>
<td>
<div class='0' id='4'>
</div>
</td>
<td>
<div class='0' id='5'>
</div>
</td>
</tr>
<tr>
<td>
<div class='1' id='1'>
</div>
</td>
<td>
<div class='1' id='2'>
</div>
</td>
<td>
<div class='1' id='3'>
</div>
</td>
<td>
<div class='1' id='4'>
</div>
</td>
<td>
<div class='1' id='5'>
</div>
</td>
</tr>
<tr>
<td>
<div class='2'>
</div>
</td>
<td>
<div class='2'>
</div>
</td>
<td>
<div class='2'>
</div>
</td>
<td>
<div class='2'>
</div>
</td>
<td>
<div class='2'>
</div>
</td>
</tr>
<tr>
<td>
<div class='3' id='1'>
</div>
</td>
<td>
<div class='3' id='2'>
</div>
</td>
<td>
<div class='3' id='3'>
</div>
</td>
<td>
<div class='3' id='4'>
</div>
</td>
<td>
<div class='3' id='5'>
</div>
</td>
</tr>
</table>
<input type='button' onclick='check()' value='check numbers'>
</body>
</html>

jquery sum clicked table row from given index to 0

<tr data-index="0" data-volume="3.50" data-price="14600.01" onclick="populateSellForm(0)" data-key="11"><td>3.50</td><td>14.600,01</td></tr>
<tr data-index="1" data-volume="5.00" data-price="14449.99" onclick="populateSellForm(1)" data-key="7"><td>5.00</td><td>14.449,99</td></tr>
<tr data-index="2" data-volume="0.78" data-price="14350.00" onclick="populateSellForm(2)" data-key="5"><td>0.78</td><td>14.350,00</td></tr>
<tr data-index="3" data-volume="2.50" data-price="14349.99" onclick="populateSellForm(3)" data-key="1"><td>2.50</td><td>14.349,99</td></tr>
<tr data-index="4" data-volume="1.10" data-price="14250.00" onclick="populateSellForm(4)" data-key="15"><td>1.10</td><td>14.250,00</td></tr>
is there a way sum data-volume and average data-price from given index (asume given index 3) to data-index 0 with jquery
maybe you could point me right direction for i do this

//**Call function range with start and end node to get sum and average **//
<script type="text/javascript">
function range(start,end){
var sumVol = 0;
var sumPrice = 0;
var count = 0;
for(var i=start;i<=end;i++)
{
sumVol += parseFloat($('tr[data-index='+i+']').attr('data-volume'));
sumPrice += parseFloat($('tr[data-index='+i+']').attr('data-price'));
count++;
}
var avgPrice = (sumPrice/count);
return "Sum of Volume = "+sumVol+" & Average Price = "+avgPrice;
}
alert(range(1,3));
</script>

You can use jquery filter function to filter the list, and then sum and avg the result.
$(document).ready(function(){
var sum = 0;
var avg = 0;
var filtered = $("tr").filter(function(){
var id = parseInt($(this).data("index"));
return ((id <=3) && (id >=0));
});
filtered.each(function(){
sum+= parseFloat($(this).data("volume"))
avg+= parseFloat($(this).data("price"))
});
console.log(sum);
console.log(parseFloat(avg/filtered.length));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<table>
<tr data-index="0" data-volume="3.50" data-price="14600.01" onclick="populateSellForm(0)" data-key="11"><td>3.50</td><td>14.600,01</td></tr>
<tr data-index="1" data-volume="5.00" data-price="14449.99" onclick="populateSellForm(1)" data-key="7"><td>5.00</td><td>14.449,99</td></tr>
<tr data-index="2" data-volume="0.78" data-price="14350.00" onclick="populateSellForm(2)" data-key="5"><td>0.78</td><td>14.350,00</td></tr>
<tr data-index="3" data-volume="2.50" data-price="14349.99" onclick="populateSellForm(3)" data-key="1"><td>2.50</td><td>14.349,99</td></tr>
<tr data-index="4" data-volume="1.10" data-price="14250.00" onclick="populateSellForm(4)" data-key="15"><td>1.10</td><td>14.250,00</td></tr>
</table>

My take on this:
I removed onclick="populateSellForm(0)" from the markup since it seems redundant because you already have data-index attribute.
Instead I attached a click event handler to rows. So, on every click on a row the sum of volumes and average price are calculated.
$(document).ready(function() {
$("table tr").on("click", function() {
if(!$(this).data("volume") || !$(this).data("price")) return;
var limit = $(this).data("index"),
trs = $("table tr"),
sumOfVolumes = 0, totalPrice = 0;
$.each(trs, function(i, val){
if(i === 0) return true;
if(i > limit + 1) return false;
sumOfVolumes += +$(trs[i]).data("volume");
totalPrice += +$(trs[i]).data("price");
});
$("#limit").text(limit + 1);
$("#volume").text(sumOfVolumes.toFixed(2));
$("#price").text((totalPrice/(limit + 1)).toFixed(2));
});
});
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:not(:first-child) {cursor: pointer; }
tr:nth-child(even){background-color: #f2f2f2}
th {
background-color: #4CAF50;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="limit">0</span> first items:<br>
Total volume: <span id="volume">0</span><br>
Average price: <span id="price">0</span><hr>
<table>
<tr>
<th>Volume</th>
<th>Price</th>
</tr>
<tr data-index="0" data-volume="3.50" data-price="14600.01" data-key="11"><td>3.50</td><td>14.600,01</td></tr>
<tr data-index="1" data-volume="5.00" data-price="14449.99" data-key="7"><td>5.00</td><td>14.449,99</td></tr>
<tr data-index="2" data-volume="0.78" data-price="14350.00" data-key="5"><td>0.78</td><td>14.350,00</td></tr>
<tr data-index="3" data-volume="2.50" data-price="14349.99" data-key="1"><td>2.50</td><td>14.349,99</td></tr>
<tr data-index="4" data-volume="1.10" data-price="14250.00" data-key="15"><td>1.10</td><td>14.250,00</td></tr>
</table>

Generate a HTML table from a given word with JavaScript

I've been able to fish around for solutions and matched them up for my case, but it seems like I hit a dead end.
Goal: Website asks you to type any word in textbox and submit it. On submit it generates a table by using JavaScript, breaking the word to letters and placing them on the table diagonally.
Current position: I've managed to successfully post the given word in to JavaScript variable, from where I've been able to break the word to separate characters. I've also generated a HTML table with JavaScript, but how do I get the word in there?
I'm happy with an answer that solves that problem of mine, but bonus points are given if it generates the table and it's content diagonally like this:
[ w ] [ - ] [ - ] [ - ]
[ - ] [ O ] [ - ] [ - ]
[ - ] [ - ] [ R ] [ - ]
[ - ] [ - ] [ - ] [ D ]
Here are my codes:
function printWord() {
var word = document.getElementById('word').value;
var body=document.getElementsByTagName('body')[0];
var tbl=document.createElement('table');
tbl.style.width='80%';
tbl.setAttribute('border','1');
var tbdy=document.createElement('tbody');
for(var i=0;i<3;i++){
var tr=document.createElement('tr');
for(var j=0;j<2;j++){
if(i==2 && j==1){
break
} else {
var td=document.createElement('td');
td.appendChild(document.createTextNode('\u0020'))
i==1&&j==1?td.setAttribute('rowSpan','2'):null;
tr.appendChild(td)
}
}
tbdy.appendChild(tr);
}
tbl.appendChild(tbdy);
body.appendChild(tbl)
for (var i = 0; i < word.length; i++) {
console.log(word.charAt(i));
}
}
<html>
<head>
<title>Help requested - Forming a table from word</title>
</head>
<body>
<div id="table">
<table>
<tr>
<td><b>Type a word:</b></td>
<td>
<input type="text" id="word">
</td>
</tr>
<tr>
<td id="btn" colspan="2">
<button type="button" onclick="printWord();">Submit</button>
</td>
</tr>
</table>
</div>
</body>
</html>
Appreciate any help or tips given!

Here you go..
I have just updated the logic into your code for Printing the Letters.
Try it.
function printWord() {
var word = document.getElementById('word').value;
var body=document.getElementsByTagName('body')[0];
var tbl=document.createElement('table');
tbl.style.width='80%';
tbl.setAttribute('border','1');
var tbdy=document.createElement('tbody');
for(var i=0;i<word.length;i++){
var tr=document.createElement('tr');
for(var j=0;j<word.length;j++){
var td=document.createElement('td');
if(j==i){
td.appendChild(document.createTextNode(word[j]));
}
tr.appendChild(td)
}
tbdy.appendChild(tr);
}
tbl.appendChild(tbdy);
body.appendChild(tbl)
for (var i = 0; i < word.length; i++) {
console.log(word.charAt(i));
}
}
<html>
<head>
<title>Help requested - Forming a table from word</title>
</head>
<body>
<div id="table">
<table>
<tr>
<td><b>Type a word:</b></td>
<td>
<input type="text" id="word">
</td>
</tr>
<tr>
<td id="btn" colspan="2">
<button type="button" onclick="printWord();">Submit</button>
</td>
</tr>
</table>
</div>
</body>
</html>

Here is a solution for your issue:
function generateTable() {
var $c = document.getElementById("container");
var $table = document.createElement('table');
var $tbody = document.createElement('tbody');
var word = document.getElementById('word').value.split("");
$c.appendChild($table);
$table.appendChild($tbody);
for (var i=0, l=word.length; i<l; i++) {
var $tr = document.createElement('tr');
$tbody.appendChild($tr);
for (var j=0, jl=word.length; j<jl; j++) {
var $td = document.createElement('td');
$td.appendChild(document.createTextNode(i==j ? word[i] : "-"));
$tr.appendChild($td);
}
}
}
<textarea id="word"></textarea><br>
<button id="generate" onclick="generateTable();">Generate</button>
<div id="container"></div>

Try this.. it is simple and easy to implement:
Demo JS Fiddle
<script>
function printWord() {
var word = document.getElementById('word').value;
var tableObj = '<table border="1">';
for(var i=0; i<word.length; i++) {
var rowObj = '<tr>';
for(var j=0; j<word.length; j++) {
var cellObj = '<td>';
if(i == j) {
cellObj += word.charAt(i);
} else {
cellObj += '-';
}
cellObj += '</td>';
rowObj += cellObj;
}
rowObj += '</tr>';
tableObj += rowObj;
}
jQuery('#dynaTableContainer').empty();
jQuery('#dynaTableContainer').append(tableObj);
}
</script>
<html>
<head>
<title>Help requested - Forming a table from word</title>
</head>
<body>
<div id="table">
<table>
<tr>
<td><b>Type a word:</b></td>
<td>
<input type="text" id="word">
</td>
</tr>
<tr>
<td id="btn" colspan="2">
<button type="button" onclick="printWord();">Submit</button>
</td>
</tr>
</table>
</div>
<div id="dynaTableContainer">
</div>
</body>
</html>
Thanks,
~Chandan

Unless there's a reason to create the elements individually, you could build a string of the HTML like this:
function buildTable(word) {
var s= '<table>';
word.split('').forEach(function(val, idx) {
s+= '<tr>'+
(new Array(idx+2).join('<td>'))+val+
(new Array(word.length-idx).join('<td>'));
});
s+= '</table>';
document.getElementById('output').innerHTML= s;
} //buildTable
function buildTable(word) {
var s= '<table>';
word.split('').forEach(function(val, idx) {
s+= '<tr>'+
(new Array(idx+2).join('<td>'))+val+
(new Array(word.length-idx).join('<td>'));
});
s+= '</table>';
document.getElementById('output').innerHTML= s;
} //buildTable
table {
border: 1px solid black;
border-spacing: 0px;
}
td {
border: 1px solid #ddd;
width: 1.5em;
height: 1.5em;
text-align: center;
}
Enter a word:
<input id="word" type="text" onchange="buildTable(this.value)">
<div id="output"></div>

Table and mouse rollover effect (hover)

I have this table:
<table border="1">
<tr>
<td></td>
<td>Banana</td>
<td>Orange</td>
<td>Plum</td>
</tr>
<tr>
<td>Banana</td>
<td>1:1</td>
<td>1:2</td>
<td>1:3</td>
</tr>
<tr>
<td>Orange</td>
<td>2:1</td>
<td>1:1</td>
<td>1,5:1</td>
</tr>
<tr>
<td>Plum</td>
<td>1:3</td>
<td>2:1</td>
<td>1:1</td>
</tr>
and CSS:
td {
height:60px;
width:60px;
text-align:center;
}
td:hover{
background-color:red;
}
What I want to do, is when I for example point my mouse on 1:3 table cell, it should highlight together with Banana and Plum cells.
Any easy way to do it?
Here's fiddle:
http://jsfiddle.net/CZEJT/

If you dont mind a bit of Javascript in there to ensure compatibility, take a look at this JSFiddle
HTML:
<table>
<tr>
<th></th><th>50kg</th><th>55kg</th><th>60kg</th><th>65kg</th><th>70kg</th>
</tr>
<tr>
<th>160cm</th><td>20</td><td>21</td><td>23</td><td>25</td><td>27</td>
</tr>
<tr>
<th>165cm</th><td>18</td><td>20</td><td>22</td><td>24</td><td>26</td>
</tr>
<tr>
<th>170cm</th><td>17</td><td>19</td><td>21</td><td>23</td><td>25</td>
</tr>
<tr>
<th>175cm</th><td>16</td><td>18</td><td>20</td><td>22</td><td>24</td>
</tr>
</table>
CSS:
table {
border-spacing: 0;
border-collapse: collapse;
overflow: hidden;
z-index: 1;
}
td, th, .ff-fix {
cursor: pointer;
padding: 10px;
position: relative;
}
td:hover::after,
.ff-fix:hover::after {
background-color: #ffa;
content: '\00a0';
height: 10000px;
left: 0;
position: absolute;
top: -5000px;
width: 100%;
z-index: -1;
}
tr:hover{
background-color: #ffa;
}
}
JS:
function firefoxFix() {
if ( /firefox/.test( window.navigator.userAgent.toLowerCase() ) ) {
var tds = document.getElementsByTagName( 'td' );
for( var index = 0; index < tds.length; index++ ) {
tds[index].innerHTML = '<div class="ff-fix">' + tds[index].innerHTML + '</div>';
};
var style = '<style>'
+ 'td { padding: 0 !important; }'
+ 'td:hover::before, td:hover::after { background-color: transparent !important; }'
+ '</style>';
document.head.insertAdjacentHTML( 'beforeEnd', style );
};
};
firefoxFix();

below is an example from one of my sites (css):
/*when hover over shape 5 dim shape 5*/
#shape5{
opacity:1.0;
filter:alpha(opacity=100);}
#shape5:hover{
opacity:0.4;
filter:alpha(opacity=40);}
/*When hoverover text5 dim shape 5!*/
#text5:hover + #shape5{opacity:0.4;
filter:alpha(opacity=40);}
Hope that helps!!
Oh Also view: How to affect other elements when a div is hovered

would you like something like this?
unfortunately it would be necessary some javascript
HTML
<table border="1">
<tr>
<td></td>
<td id='1'>Banana</td>
<td id='2'>Orange</td>
<td id='3'>Plum</td>
</tr>
<tr>
<td>Banana</td>
<td class='o1'>1:1</td>
<td class='o2'>1:2</td>
<td class='o3'>1:3</td>
</tr>
<tr>
<td>Orange</td>
<td class='o1'>2:1</td>
<td class='o2'>1:1</td>
<td class='o3'>1,5:1</td>
</tr>
<tr>
<td>Plum</td>
<td class='o1'>1:3</td>
<td class='o2'>2:1</td>
<td class='o3'>1:1</td>
</tr>
</table>
JAVASCRIPT
var cells1 = $('.o1');
cells1.on('mouseover', function(){
$($(this).parent().children()[0]).css({background: '#ddd'})
$('#1').css({background: '#ddd'})
})
cells1.on('mouseout', function(){
$($(this).parent().children()[0]).css({background: 'none'})
$('#1').css({background: 'none'})
})
var cells2 = $('.o2');
cells2.on('mouseover', function(){
$($(this).parent().children()[0]).css({background: '#ddd'})
$('#2').css({background: '#ddd'})
})
cells2.on('mouseout', function(){
$($(this).parent().children()[0]).css({background: 'none'})
$('#2').css({background: 'none'})
})
var cells3 = $('.o3');
cells3.on('mouseover', function(){
$($(this).parent().children()[0]).css({background: '#ddd'})
$('#3').css({background: '#ddd'})
})
cells3.on('mouseout', function(){
$($(this).parent().children()[0]).css({background: 'none'})
$('#3').css({background: 'none'})
})
CSS
td {
height:60px;
width:60px;
text-align:center;
}
td:hover{
background-color:red;
}

Try this:
Fiddle
Without changing your html structure or adding any third party library:
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
var tds = document.getElementsByTagName('td');
for (var i = 0; i < tds.length; i++) {
var elem = document.getElementsByTagName('td')[i];
elem.addEventListener('mouseover', function () {
var text = this.innerHTML;
for (var j = 0; j < tds.length; j++) {
var elem2 = document.getElementsByTagName('td')[j];
if (elem2.innerHTML == text) {
elem2.style.background = 'red';
}
}
}, false);
elem.addEventListener('mouseout', function () {
for (var j = 0; j < tds.length; j++) {
var elem2 = document.getElementsByTagName('td')[j];
var text = this.innerHTML;
if (elem2.innerHTML == text) {
elem2.style.background = 'none';
}
}
}, false);
}
}, false);
</script>

I apologise that my answer is only in pseudo code, however I would approach this problem by using javascript (most possibly Jquery). I hope this makes sense...
<table id="tbl"> - so I would give the table an ID
<td onHover="changeHeaderColummns(this)"></td> - then on each of the columns have a jsMethod that fires.
<script>
changeHeaderColumsn(col)
{
var colIndex = col.Index; //get the current column index
var row = GetHeaderRow(); // get the header row
highLightColumn(row, colIndex); //change the colour of the cell
//with the same index in the header
row = getCurrentRow(col.RowIndex); //now get the current row
highlightColumn(row, 0); //change the colour of the cell
//with the index of 0
}
getHeaderRow()
{
return getRow(0);
}
getRow(rowIndex)
{
var table = document.getElementByID("tbl);
return table.rows[rowIndex];
}
highlightColumn(row, colIndex)
{
row[colIndex].style.backgroundcolor = "red";
}

for highlight columns you must use js like this jsfiddler. It's work with jQuery ;)
With code

Using jquery
fiddle: http://jsfiddle.net/itsmikem/CZEJT/12/
Option 1: highlights the cell and just the named fruit cells
$("td").on({
"mouseenter":function(){
$(this).closest("tr").find("td:first-child").css("background","#f99");
var col = $(this).index();
$(this).closest("table").find("tr:first-child").find(String("td:nth-child(" + (col + 1) + ")")).css("background","#f99");
$(this).css("background","#f00");
},
"mouseleave":function(){
$(this).closest("table").find("td,tr").css("background","none");
}
});
Option 2: highlights entire rows and columns that intersect the hovered cell
$("td").on({
"mouseenter": function () {
$(this).closest("tr").css("background", "#f99");
var col = $(this).index();
var myTable = $(this).closest("table");
var rows = $(myTable).find("tr");
$(rows).each(function (ind, elem) {
var sel = String("td:nth-child(" + (col + 1) + ")");
$(this).find(sel).css("background", "#f99");
});
$(this).css("background", "#f00");
},
"mouseleave": function () {
$(this).closest("table").find("td,tr").css("background", "none");
}
});