表格内自定义多选按钮样式，实现全选功能，纯表格内容js分页

程序员文章站 2022-03-07 17:06:30
...
修改多选按钮默认样式，使input隐藏，添加UI设计给你的样式图片到标签i中，设置为背景图片。
在表格里面实现按钮的全选，点击标题栏，实现全选，或者点击表格每一行，也可以选中这一行
我们只根据UI给的设计图写的前台界面，没有后台数据，所以数据我是通过纯js循环添加的，表格的分页也是根据这个来分页的，与后台数据无关，就是纯js代码。可以上一页下一页首页尾页，也可以跳转到指定页面。
总结
1. 很多不懂，我也是参考别人的
2. 分页的js不能加在window.onload=function(){}里面，不然没有作用，我也不知道为什么，求大神告知
3. 很多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>&nbsp;&nbsp;<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) + ');">' + '&nbsp;' + i + '&nbsp;' + '</a></span>'));
                    } else {
                        $("#spanNext").before($('<span id="num' + i + '" ><a id="' + i + '" href="javascript:numPage(' + (i - 1) + ');">' + '&nbsp;' + i + '&nbsp;' + '</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>
相关标签：表格样式分页数据图片
上一篇： vue+elementui 实现带分页多选表格记忆之前的选项
下一篇： python中几种单例模式的实现