button样式，checkbox全/反选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>歌曲列表</title>
<link rel="stylesheet" type="text/css" href="table.css">
<style type="text/css">
/*按钮样式定义*/
button{
background:#F0F0F0;
border-top:1px solid #708090;
border-right:1px solid #708090;
border-bottom:1px solid #708090;
border-left:1px solid #708090;
width:80px;
height:auto;
font-size:10pt;
cursor: help;/*wait 等待; help 问号*/
}
</style>
<script type="text/javascript">
function checkAll(btn){
//获取table中所有的checkbox
var collMusics = document.getElementById("music");
var oRows = collMusics.rows;
//遍历每一行
for(var i=1;i<oRows.length-1;i++) {
//获取行的列集合中的第1个td节点对象
var oTd = oRows[i].cells[0];
//根据标签名从td中获取checkbox节点对象
var ckb = oTd.getElementsByTagName("input")[0];
ckb.checked = !ckb.checked;//将checked属性进行取反
}
}
</script>
</head>
<body>
<div>
<table id="music">
<tbody>
<tr>
<th>歌曲名称</th>
<th>演唱者</th>
</tr>
<tr>
<td><input type="checkbox"/>红玫瑰 </td>
<td>陈奕迅</td>
</tr>
<tr>
<td><input type="checkbox"/>童年</td>
<td>罗大佑</td>
</tr>
<tr>
<td><input type="checkbox"/>明明白白我的心</td>
<td>成功</td>
</tr>
<tr>
<td><input type="checkbox"/>月亮代表我的心</td>
<td>邓丽君</td>
</tr>
<tr>
<td><input type="checkbox"/>其实你不懂我的心</td>
<td>童安格</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" align="center"><button onclick="checkAll(this)">全/反选</button></td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>