表格内自定义多选按钮样式，实现全选功能，纯表格内容js分页
来源：互联网 发布：ab测试 算法 编辑：程序博客网 时间：2024/05/29 16:29
- 修改多选按钮默认样式，使input隐藏，添加UI设计给你的样式图片到标签i中，设置为背景图片。
- 在表格里面实现按钮的全选，点击标题栏，实现全选，或者点击表格每一行，也可以选中这一行
- 我们只根据UI给的设计图写的前台界面，没有后台数据，所以数据我是通过纯js循环添加的，表格的分页也是根据这个来分页的，与后台数据无关，就是纯js代码。可以上一页下一页首页尾页，也可以跳转到指定页面。
- 总结
- 很多不懂，我也是参考别人的
- 分页的js不能加在window.onload=function(){}里面，不然没有作用，我也不知道为什么，求大神告知
- 很多input框的属性都是可以修改的，但是checkbox和radio不可以，所以需要自定义样式（我觉得就UI多事改啥样式啊
源码如下：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css" /> </head> <style type="text/css"> body { font-family: "微软雅黑"; margin: 0; background: #FFFFFF; } table { position: absolute; width: auto; text-align: center; } /*头部thead样式*/ thead tr th { font-size: 14px; line-height: 30px; color: #66838e; text-align: center; } /*主体tbody样式*/ tbody tr td { font-size: 14px; line-height: 39px; color: #000000; } tbody tr td a { font-size: 14px; line-height: 39px; color: #8E8E8E; } tbody tr td a:hover { text-decoration: none; color: #155CEC; } /*自定义多选框按钮样式*/ .checkbox { display: inline-block; cursor: pointer; .checkbox input { display: none; } .checkbox i { position: relative; top: 4px; left: 10px; display: block; width: 18px; height: 18px; background: url('../img/unselected.png')left top no-repeat; background-size: cover; background-image: url('../img/unselected.png'); } .checkbox input:checked+i { background: url('../img/selected.png')left top no-repeat; background-size: cover; } /*脚部tfoot样式*/ tfoot tr td { position: relative; font-size: 12px; line-height: 36px; color: #666666; text-align: right; } .table_active { text-decoration: none; background: rgb(21, 101, 183); border-radius: 3px; color: #FFFFFF; } </style> <body> <div class="table"> <table id="table1" class="table table-condensed"> <thead> <tr> <th width="84px"> <label class="checkbox"> <input type="checkbox" id=""/><i></i> </label> </th> <th width="121px">序号</th> <th width="189px">用户名</th> <th width="139px">密码</th> <th width="700px">备注</th> <th width="px">操作</th> </tr> </thead> <tbody id="table2"> <!--添加表内容--> </tbody> <tfoot> <tr> <td colspan="6" id="span_nums"> <span id="spanFirst">首页</span> <span id="spanPre">上页</span> <span id="spanNext">下页</span> <span id="spanPageNum"></span> <span> <input style="width: 40px;" type="text" id="input_num" value="" /></span> <span id="step_input_num"> <a href="#">转到</a> </span> <span id="spanLast">尾页</span> </td> </tr> </tfoot> </table> <!--</form>--> </div> <!--js代码--> <script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> /*表格隔行变色*/ var oTab1 = document.getElementById('table1'); for(var i = 0; i < oTab1.tBodies[0].rows.length; i++) { if(i % 2) { oTab1.tBodies[0].rows[i].style.background = 'rgb(255,255,255)'; } else { oTab1.tBodies[0].rows[i].style.background = 'rgb(248,248,248)'; } } /*for循环添加数据*/ function addData() { for(var i = 1; i <= 600; i++) { //增加一行 var oTr = document.createElement('tr'); //增加第一列 var oTd = document.createElement('td'); oTd.innerHTML = '<label class="checkbox"><input type="checkbox" id=""/><i></i></label>'; oTr.appendChild(oTd); //增加第二列 var oTd = document.createElement('td'); oTd.innerHTML = '20170110' + i; oTr.appendChild(oTd); //增加第三列 var oTd = document.createElement('td'); oTd.innerHTML = '张三' + i; oTr.appendChild(oTd); //增加第四列 var oTd = document.createElement('td'); oTd.innerHTML = '******' + i; oTr.appendChild(oTd); //增加第五列 var oTd = document.createElement('td'); oTd.innerHTML = '工号1010使用中'; oTr.appendChild(oTd); //增加第六列 var oTd = document.createElement('td'); oTd.innerHTML = '<a class="tab-update">修改</a> <a class="tab-delete">删除</a>'; oTr.appendChild(oTd); //增加一行至表格中 oTab1.tBodies[0].appendChild(oTr); } } addData(); /*给删除添加点击事件*/ $('.tab-delete').click(function() { $(this.parentNode.parentNode).remove(); }); /*全选*/ function initTableCheckbox() { var $thr = $('table thead tr'); var $checkAll = $thr.find('label'); var $tbr = $('table tbody tr'); /*设置表头的第一个多选按钮作为全选或者反选按钮*/ $checkAll.click(function(event) { $('tbody').find('input').prop('checked', true); event.stopPropagation(); }); /*点击全选框单元格时，也会触发全选框的点击操作*/ $('table thead tr th').click(function() { $(this).find('label').click(); }); /*点击每一行的选中复选框时*/ $tbr.find('label').click(function(event) { $checkAll.prop('checked', $('tbody').find('input:checked').length == $tbr.length ? true : false); event.stopPropagation(); }); /*点击每一行时也触发该行的选中操作*/ $tbr.click(function() { $(this).find('label').click(); }); } initTableCheckbox(); /*分页功能开始*/ //增加显示得页码个数，并跳转到指定页面 function step_num(count) { $("#span_nums").attr("length", '0'); for(var i = 1; i < count + 1; i++) { if(i == 1) { $("#spanNext").before($('<span id="num' + i + '" ><a id="' + i + '" class="table_active" href="javascript:numPage(' + (i - 1) + ');">' + ' ' + i + ' ' + '</a></span>')); } else { $("#spanNext").before($('<span id="num' + i + '" ><a id="' + i + '" href="javascript:numPage(' + (i - 1) + ');">' + ' ' + i + ' ' + '</a></span>')); } } } var theTable = document.getElementById("table2"); var totalPage = document.getElementById("spanTotalPage"); var pageNum = document.getElementById("spanPageNum"); var spanPre = document.getElementById("spanPre"); var spanNext = document.getElementById("spanNext"); var second = document.getElementById("second"); var spanFirst = document.getElementById("spanFirst"); var spanLast = document.getElementById("spanLast"); var numberRowsInTable = theTable.rows.length; var pageSize = 10; //页面显示数据的条数 var page = 1; var now = 0; //下一页 function nextPage() { hideTable(); currentRow = pageSize * page; maxRow = currentRow + pageSize; if(maxRow > numberRowsInTable) maxRow = numberRowsInTable; for(var i = currentRow; i < maxRow; i++) { theTable.rows[i].style.display = ''; } page++; if(maxRow == numberRowsInTable) { nextText(); lastText(); } showPage(); preLink(); firstLink(); } function numPage(page) { //跳转到指定页面，page接收点击的值 hideTable(); currentRow = pageSize * page; maxRow = currentRow + pageSize; if(maxRow > numberRowsInTable) maxRow = numberRowsInTable; for(var i = currentRow; i < maxRow; i++) { theTable.rows[i].style.display = ''; } //跳转到指定页面时，页码颜色样式变化 for(var j = 1; j < totalPage.innerHTML; j++) { document.getElementById(j).className = ''; } document.getElementById(page + 1).className = 'table_active'; page++; if(maxRow == numberRowsInTable) { nextText(); lastText(); } showPage(); preLink(); firstLink(); } /*跳转到指定页面*/ var input_num = document.getElementById('input_num'); var step_input_num = document.getElementById('step_input_num'); /*跳转的点击事件*/ step_input_num.onclick = function() { if(input_num.innerHTML != 0) { var getnum = input_num.value - 1; numPage(getnum); } }; /*输入框的键盘的回车事件*/ input_num.onkeydown = function(ev) { var oEvent = ev || event; if(oEvent.keyCode == 13 && input_num.innerHTML != 0) { var getnum = input_num.value - 1; numPage(getnum); } }; //上一页 function prePage() { hideTable(); page--; currentRow = pageSize * page; maxRow = currentRow - pageSize; if(currentRow > numberRowsInTable) currentRow = numberRowsInTable; for(var i = maxRow; i < currentRow; i++) { theTable.rows[i].style.display = ''; } if(maxRow == 0) { preText(); firstText(); } showPage(); nextLink(); lastLink(); } //第一页 function firstPage() { hideTable(); // page = 1; for(var i = 0; i < pageSize; i++) { theTable.rows[i].style.display = ''; } showPage(); firstText(); preText(); nextLink(); lastLink(); } //最后一页 function lastPage() { hideTable(); page = pageCount(); currentRow = pageSize * (page - 1); for(var i = currentRow; i < numberRowsInTable; i++) { theTable.rows[i].style.display = ''; } showPage(); preLink(); nextText(); firstLink(); lastText(); } function hideTable() { for(var i = 0; i < numberRowsInTable; i++) { theTable.rows[i].style.display = 'none'; } } function showPage() { pageNum.innerHTML = page; } //总共页数 function pageCount() { var count = 0; if(numberRowsInTable % pageSize != 0) count = 1; return parseInt(numberRowsInTable / pageSize) + count; } //显示链接 function preLink() { spanPre.innerHTML = "<a href='javascript:prePage();'>上页</a>"; } function preText() { spanPre.innerHTML = "上页"; } function nextLink() { spanNext.innerHTML = "<a href='javascript:nextPage();'>下页</a>"; } function nextText() { spanNext.innerHTML = "下页"; } function firstLink() { spanFirst.innerHTML = "<a href='javascript:firstPage();'>首页</a>"; } function firstText() { spanFirst.innerHTML = "首页"; } function lastLink() { spanLast.innerHTML = "<a href='javascript:lastPage();'>尾页</a>"; } function lastText() { spanLast.innerHTML = "尾页"; } //只显示第一页的数据 function showfirstPage() { for(var i = pageSize; i < numberRowsInTable; i++) { theTable.rows[i].style.display = 'none'; } var count = pageCount(); totalPage.innerHTML = pageCount(); pageNum.innerHTML = '1'; step_num(count); nextLink(); lastLink(); } showfirstPage(); /*分页功能结束*/ </script> </body></html>阅读全文
0 0
- 表格内自定义多选按钮样式，实现全选功能，纯表格内容js分页
- js实现表格全选功能
- js实现表格分页
- 表格里全选按钮
- 手动实现表格分页功能
- 一个纯js写的分页功能，表格数据为json串
- CSS设计表格（上）--样式设计及全选功能
- layui表格checkbox选择全选样式及功能
- Vue.js实践：实现多条件筛选、搜索、排序及分页的表格功能
- Vue.js实现多条件筛选、搜索、排序及分页的表格功能
- Vue.js实现多条件筛选、搜索、排序及分页的表格功能
- 纯JS全选功能
- bootstrap实现自定义按钮导出Excel表格
- JS实现的全选/全不选功能按钮
- jquery实现表格全选反选案例
- 数据表格全选和取消全选功能
- js实现搜索表格内数据
- 【NCRE】C#实现表格首列CheckBox全选功能
- 软件开发流程
- 正则表达式实践（看完就会）
- 网易2017内推笔试2：幸运的袋子 [python]
- Android 角标
- Lambda linq 区别
- 表格内自定义多选按钮样式，实现全选功能，纯表格内容js分页
- 《计算机操作系统》总结一
- 备注一下从MarginNote到Scrivener的过程
- echarts 地图散点
- 利用spring mvc 拦截器 鉴权
- spark原理入门详解：包括生态、特点、概念等
- 关于IDEA2017.2.5 输入法 中文输入框无法显示问题的解决方案
- DCGAN论文笔记+源码解析
- 从C开始学起
