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

简介: 表格插件-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>
相关文章
|
4月前
|
JSON 前端开发 数据格式
bootstrap table表格的点击详情按钮操作
bootstrap table表格的点击详情按钮操作
42 1
|
4月前
|
前端开发 JavaScript
Bootstrap Table根据参数搜索功能
Bootstrap Table根据参数搜索功能
37 0
|
4月前
|
前端开发
bootstrap table点击修改按钮给弹框赋值
bootstrap table点击修改按钮给弹框赋值
19 0
|
4月前
|
JSON 前端开发 数据库
Bootstrap Table使用教程(请求json数据渲染表格)
Bootstrap Table使用教程(请求json数据渲染表格)
42 0
|
4月前
|
前端开发
bootstrap table分页悬停颜色改变
bootstrap table分页悬停颜色改变
18 0
|
4月前
|
前端开发
解决bootstrap table刷新加载时白色闪屏问题
解决bootstrap table刷新加载时白色闪屏问题
28 0
|
4月前
|
前端开发
bootstrap table+layer实现一个表格删除
bootstrap table+layer实现一个表格删除
17 0
|
4月前
|
前端开发
bootstrap table表格去掉排序箭头
bootstrap table表格去掉排序箭头
33 2
|
4月前
|
前端开发
bootstrap table表格外面的边框全部去掉
bootstrap table表格外面的边框全部去掉
60 1
|
4月前
|
JSON 前端开发 JavaScript
bootstrap table表格内容居中对齐
bootstrap table表格内容居中对齐
40 0

相关产品

  • 云迁移中心