Using the .cellIndex property of a TH element to find out which table column
it is over can cause misleading results when the table has cells which have
rowspans or colspans greater than 1.
See example: http://www.javascripttoolbox.com/tem...cellindex.html
(code pasted below for reference)
This behaves according to specs and expectations, however the value of the
cellIndex property becomes less useful when using it to determine which
column to sort onclick, etc.
I plan to write some code to calculate the "actual" column index of each
cell in a <theadof a table. But if anyone has already done this exercise,
please do share so I can perhaps use my time working on something else :)
Thanks!
EXAMPLE CODE:
<html>
<head>
<title></title>
<script type="text/javascript">
window.onload = function() {
var ths = document.getElementsByTagName('TH');
for (var i=0; i<ths.length; i++) {
ths[i].innerHTML = ths[i].parentNode.rowIndex + "," + ths[i].cellIndex;
}
}
</script>
<style>
th {
vertical-align:top;
text-align:left;
width:50px;
}
</style>
</head>
<body>
<table border="1">
<thead>
<tr>
<th rowspan="2"> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
</tr>
<tr>
<th colspan="2"> </th>
<th rowspan="2"> </th>
<th> </th>
</tr>
<tr>
<th colspan="2"> </th>
<th> </th>
<th> </th>
</tr>
</thead>
</table>
</body>
</html>
--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com
