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>
相关推荐
yfisaboy 2020-07-28
牵手白首 2020-06-02
MaureenChen 2020-05-25
GoAheadY 2010-08-21
taiyuanwuyin 2011-08-20
81463166 2019-10-26
wangdajiao 2019-07-01
魄竹 2019-07-01
renpinghao 2019-07-01
李鴻耀 2018-05-23
tianqi 2014-09-14
hjfbluesky 2013-09-23
Sincelily 2011-08-02
Sunanang 2010-08-22
sgafdsg 2010-08-21
82113458 2018-04-11
DJPLH 2017-03-29
zh000 2019-05-09