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)-762-9782', mobile: '(565)-627-3002' } ]; $(function () { $('#table').renderTable(); }); ;(function ($, window, document, undefined) { var RenderTable = function (elem) { var self = this; this.table = elem.get(0); this.tBody = this.table.tBodies[0]; this.select_num = 0; // 记录点击值 }; RenderTable.prototype = { ifAllSelected: function () { for (var i = 0; i < this.select_input.length; i++) { if (this.select_num === this.select_input.length - 1) { this.selectAll.checked = true; } } }, select: function (index) { if (hasClass(this.tBody_rows[index], 'selected-bgColor')) { removeClass(this.tBody_rows[index], 'selected-bgColor'); this.select_input[index].checked = false; this.selectAll.checked = false; if (this.select_num > 0) { this.select_num --; } else { this.select_num = 0; } } else { addClass(this.tBody_rows[index], 'selected-bgColor'); this.select_input[index].checked = true; this.ifAllSelected(); this.select_num ++; } }, eventColor: function (index) { if (index % 2 === 0) { this.tBody_rows[index].className = 'event-bgColor'; } else { this.tBody_rows[index].className = 'default-bgCo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0