用col元素快速改变table某列的背景色
col元素，一个不怎么被提起的元素，甚至有些人根本不知道它的存在，它是表格table中用于控制列的这么一个元素，如果用好了，有时候还是很方便的，譬如接下来要讲的当鼠标点击表格头部某一列时如何改变整列的背景色，OK就来试试
<html>
<head>
<style type="text/css">
table{border-collapse:collapse;border:1px solid #666}
td{border-collapse:collapse;border-bottom:1px solid #666}
thead td{background:#ddd; cursor:pointer}
.sel{font-weight:22px; background:green; color:red;}
</style>
<script type="text/javascript">
function selT(event){
var cols = document.getElementsByTagName('col');
var len = cols.length;
var event = event || window.event;
var srcEle = event.srcElement||event.target;
if(srcEle.tagName.toLowerCase() == 'td'){
var index = srcEle.cellIndex;
for(var i = 0; i < len; i++){
index == i?cols[i].className = 'sel' : cols[i].className = '';
}
}
}
</script>
</head>
<body>
<table width="300">
<col align="left" />
<col align="left" />
<col align="right" />
<thead onclick="selT(event);">
<tr><td>ISBN</td><td>Title</td><td>Price</td></tr>
</thead>
<tr><td>3476896</td><td>My first HTML</td><td>$53</td></tr>
<tr><td>2489604</td><td>My first CSS</td><td>$47</td></tr>
<tr><td>3476896</td><td>My first HTML</td><td>$53</td></tr>
<tr><td>2489604</td><td>My first CSS</td><td>$47</td></tr>
</table>
</body>
</html>
<head>
<style type="text/css">
table{border-collapse:collapse;border:1px solid #666}
td{border-collapse:collapse;border-bottom:1px solid #666}
thead td{background:#ddd; cursor:pointer}
.sel{font-weight:22px; background:green; color:red;}
</style>
<script type="text/javascript">
function selT(event){
var cols = document.getElementsByTagName('col');
var len = cols.length;
var event = event || window.event;
var srcEle = event.srcElement||event.target;
if(srcEle.tagName.toLowerCase() == 'td'){
var index = srcEle.cellIndex;
for(var i = 0; i < len; i++){
index == i?cols[i].className = 'sel' : cols[i].className = '';
}
}
}
</script>
</head>
<body>
<table width="300">
<col align="left" />
<col align="left" />
<col align="right" />
<thead onclick="selT(event);">
<tr><td>ISBN</td><td>Title</td><td>Price</td></tr>
</thead>
<tr><td>3476896</td><td>My first HTML</td><td>$53</td></tr>
<tr><td>2489604</td><td>My first CSS</td><td>$47</td></tr>
<tr><td>3476896</td><td>My first HTML</td><td>$53</td></tr>
<tr><td>2489604</td><td>My first CSS</td><td>$47</td></tr>
</table>
</body>
</html>
