jquery实现表格checkbox单选多选变色效果代码
代码语言:html
所属分类:表格
代码描述:jquery实现表格checkbox单选多选变色效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; } body { font-family: 'Microsoft Yahei'; font-size: 18px; background-color: #f8f8f8; } #table { width: 1200px; margin: 40px auto 0; border-collapse: collapse; background-color: #fff; } #table td, #table th { padding: 0.75em 1.5em; } #table thead { color: #fff; background-color: #31bc86; } #table thead th { text-align: left; } #table tbody {} #table tbody tr { border-bottom: 2px dashed #000; cursor: default; transition: all .125s ease-in-out; } #table tbody tr:hover { /*background-color: rgba(129,208,177,.3);*/ } #table tbody tr.event-bgColor { background-color: rgba(255, 192, 203, .2); } #table tbody tr.default-bgColor { background-color: #fff; } #table tbody tr.hover-bgColor { background-color: rgba(255, 192, 203, .8); } #table tbody tr.selected-bgColor { background-color: rgb(255, 192, 203); } input { width: 16px; height: 16px; } #selectAll { margin-left: -4px; } .checkbox { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } </style> </head> <body> <table id="table"> <thead> <tr> <th class="checkbox checkbox-primary"> <input type="checkbox" class="styled" id="selectAll"> <label for="selectAll">SelectAll</label> </th> <th>Name</th> <th>Email</th> <th>Phone</th> <th>Mobile</th> </tr> </thead> <tbody></tbody> </table> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script > var table_data = [ { name: 'Gary Coleman', email: 'gary.coleman21@example.com', phone: '(398)-332-5385', mobile: '(888)-677-3719' }, { name: 'Rose Parker', email: 'rose.parker16@example.com', phone: ' (293)-873-2247', mobile: '(216)-889-4933' }, { name: 'Chloe Nelson', email: 'chloe.nelson18@example.com', phone: '(957)-213-3499', mobile: '(207)-516-4474' }, { name: 'Eric Bell', email: 'eric.bell16@example.com', phone: '(897).........完整代码请登录后点击上方下载按钮下载查看
网友评论0