HTML "col" tag actions using Javascript
Wednesday, October 1, 2008a Client was struggling to get an "onClick" function to work on one of his pages so he sent me this code:
<table border="1">
<colgroup span="4">
<col onclick="alert('Colomn clicked') " width="20"></col>
<col width="50"></col>
<col width="80"></col>
<col width="10"></col>
</colgroup>
<tr>
<td>1111</td>
<td>2222</td>
<td>3333</td>
<td>4444</td>
</tr>
<tr onclick="alert('Row 2 clicked') ">
<td>1222</td>
<td>2333</td>
<td>3444</td>
<td onclick="alert('field 4555 clicked') ">4555</td>
</tr>
</table>
If you run the code you will see that the "onClick" alert fires everywhere except when used in the <col> tag.
The desired effect can however be achieved using some Javascript.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
function wireUpCells()
{
var myTable = document.getElementById("myTable");
for(var i = 0; i < myTable.rows.length; i++)
{
for(var j = 0; j < myTable.rows[i].cells.length; j++)
{
myTable.rows[i].cells[j].setAttribute('onclick', 'alert("Welcome to (row,col) (' + (i + 1) + ',' + (j + 1) + ')")');
}
}
}
window.onload = wireUpCells;
</script>
</head>
<body>
<table cellspacing="0" id="myTable" border="1" style="border:1px solid #666666; border-collapse: collapse; ">
<COL width="80" style="background-color:#EDF8F4;">
<COL width="150" style="background-color:#EAF2FF;">
<COL width="200" style="background-color:#FDF4E1;">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
<td>Row1 cell3</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
<td>Row2 cell3</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
<td>Row3 cell3</td>
</tr>
</table>
</body>
</html>
The 
