表格插件-bootstrap table的隔行换色

在写表格插件的时候，要不断的进行表格优化，才会让界面的感观变得越来越好看，bootstrap table的隔行换色功能也是其中的一个，几行代码就OK了。

代码如下：

#mytable tr:nth-child(even){
background: #fafafa;
}
#mytable th{
background: #efefef;
}

demo示例

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <!-- 引入的css文件  -->
        <link href="css/bootstrap.min.css" rel="stylesheet" />
        <link href="css/bootstrap-table.min.css" rel="stylesheet">

        <title></title>
        <style>
            #mytable tr:nth-child(even) {
                background: #fafafa;
            }
            
            #mytable th {
                background: #efefef;
            }
            
            #delUser,
            #dupUser,
            #devLocation,
            #devList {
                background: #1caf9a;
                color: #FFFFFF;
                border: none;
                margin-left: 12px;
            }
        </style>
    </head>

    <body>
        <table id="mytable"></table>

    </body>
    <!-- 引入的js文件 -->
    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-table.min.js"></script>
    <script src="js/bootstrap-table-zh-CN.min.js"></script>

    <script>
        $('#mytable').bootstrapTable({
            columns: [{
                field: 'id',
                title: '编号名'
            }, {
                field: 'name',
                title: '姓名'
            }, {
                field: 'photo',
                title: '联系方式'
            }, {
                title: '操作',
                field: 'id',
                formatter: option
            }],

            data: [{
                id: 1,
                name: '王小婷',
                photo: '1373717324'
            }, {
                id: 2,
                name: '安安',
                photo: '131313'
            }, {
                id: 3,
                name: 'xixi',
                photo: '131313'
            }, {
                id: 3,
                name: 'xixi',
                photo: '131313'
            }, {
                id: 3,
                name: 'xixi',
                photo: '131313'
            }]
        })

        // 定义删除、更新操作
        function option(value, row, index) {
            var htm = '<button id="delUser" userId=' + value + ' onclick="delUser(this)">删除</button>' +
                '<button id="dupUser">修改</button>' +
                '<button id="devLocation"  onclick="getLocationMap()">设备定位</button>' +
                '<button id="devList" onclick="getDevList()">设备列表</button>'
            return htm;
        }

        // 删除用户
        function delUser(dom) {

            var mymessage = confirm("确认删除嘛？");
            if(mymessage == true) {
                $.ajax({
                    url: path + '/user/' + $(dom).attr("userId"),
                    type: 'delete',
                    success: function(data) {
                        $(dom).parent().parent().hide();
                    },
                    error: function(data) {
                        alert("服务器繁忙")
                    }
                });
            }
        }
    </script>
</html>

原文作者：祈澈姑娘技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，爱折腾。坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。

表格插件-bootstrap table的隔行换色

猜你喜欢