CSS实现表格样式及全选功能资源-CSDN文库

共3个文件

html：2个

js：1个

TABLE

需积分: 1 93 浏览量 2015-12-12 23:48:21 上传评论收藏 33KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

TableStudy.rar （3个子文件）

TableStudy

table2.html 3KB

jquery.js 92KB

table1.html 2KB

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Table界面</title> <style type="text/css"> body{margin: 0;} .main{ width: 600px; margin-top: 10px; margin-left:auto; margin-right:auto; } .table{width: 100%;background-color: transparent;border-collapse:collapse;border-spacing:0} .table th,.table td{padding:8px;line-height:20px;text-align: center;} .table-border{border-top:1px solid #ddd;} .table-border th,.table-border td{border-bottom: 1px solid #ddd;} .table-bg thead{background-color: #f5fafe;} .tableselected{background-color: #f5fafe;} .table-bordered{border:1px solid #ddd;border-collapse:separate;*border-collapse:collapse;border-left:0} .table-bordered th,.table-bordered td{border-left:1px solid #ddd} .table-border.table-bordered{border-bottom:0} .table-hover tbody tr:hover td{background-color:#f5f5f5} </style> </head> <body> <div class="main"> <table class="table table-border table-bordered table-bg table-hover"> <thead> <tr> <th width="25"><input type="checkbox" name="" value=""></th> <th width="75">ID</th> <th width="120">用户名</th> <th width="80">性别</th> <th width="130">电话</th> <th width="170">操作</th> </tr> </thead> <tbody> <tr > <td><input type="checkbox" value="1" name=""></td> <td>1</td> <td>张三</td> <td>男</td> <td>123456789</td> <td ><a title="删除" href="#">删除</a></td> </tr> <tr > <td><input type="checkbox" value="1" name=""></td> <td>2</td> <td>李四</td> <td>男</td> <td>123456789</td> <td ><a title="删除" href="#">删除</a></td> </tr> <tr > <td><input type="checkbox" value="1" name=""></td> <td>3</td> <td>王五</td> <td>男</td> <td>123456789</td> <td ><a title="删除" href="#">删除</a></td> </tr> </tbody> </table> </div> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> /*checkbox全选*/ $("table thead th input:checkbox").on( "click" , function(){ $(this).closest("table").find("tr > td:first-child input:checkbox").prop("checked",$(this).prop("checked")); } ); $("table tbody tr input:checkbox").on("click", function(){ var ischeck = $(this).prop("checked"); if(ischeck == false) { $(this).closest("table").find("tr > th:first-child input:checkbox").prop("checked",$(this).prop("checked")); } } ); </script> </body> </html>

评论收藏

内容反馈