表格插件-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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏云端漫步

mac下开启docker API远程调用

docker容器技术至今已有五年的发展,作为一个工具,已经像Linux命令一样融入我们开发的生活。现在大多开发都使用Mac作为开发机,大都会装一个Docker ...

1.2K2
来自专栏Wordpress专用主机|主题模板|必备插件

5款经典的WORDPRESS问答类主题模板推荐

近期,有不少WP爱好者问我:wordpress可以用来做问答类网站吗?类似于百度知道,知乎之类的。 答案是当然可以!其实wordpress也有不少优秀的问答类主...

2.3K8
来自专栏一个会写诗的程序员的博客

yarn详细入门教程Yarn简介一键安装常用命令

Yarn 是 Facebook, Google, Exponent 和 Tilde 开发的一款新的 JavaScript 包管理工具。就像我们可以从官方文档了解...

4054
来自专栏Golang语言社区

从零开始创建一个基于Go语言的web service

20个小时的时间能干什么?也许浑浑噩噩就过去了,也许能看一些书、做一些工作、读几篇博客、再写个一两篇博客,等等。而黑客马拉松(HackAthon),其实是一种自...

5189
来自专栏Jerry的SAP技术分享

CRM数据库表COM_TA_R3_ID的数据来源

这个表存放的内容是CRM产品同名settype COM_TA_R3_ID对应的业务数据。

3007
来自专栏Timhbw博客

macOS Sierra下载地址

2016-06-1710:00:42 发表评论 416℃热度 天生爱折腾,ios10还是比较好下载的,WWDC2016刚结束,网上一就一大堆教程,然而macO...

2949
来自专栏后端技术探索

nginx防止DDOS攻击配置(二)

我们用的高防服务器只防流量攻击不防CC,现在的攻击多数都是混合型的,而且CC攻击很多,防CC只能自己搞了,按照第一篇的配置,在实际的使用中效果并不理想。限制每秒...

5402
来自专栏QQ音乐技术团队的专栏

Android O 新特性和行为变更总结

多窗口是 Android 7.1 之后引入的(关于多窗口适配需要注意的地方,但是趁此机会了解一下 Android O 版本的新特性也不错,而且 Google I...

7451
来自专栏Jerry的SAP技术分享

SAP产品的Field Extensibility

SAP开发人员的工作职责,除了实现软件的功能性需求外,还会花费相当的精力实现一些非功能性需求,来满足所谓的SAP Product Standard(产品标准)。...

1231
来自专栏JetpropelledSnake

SNMP学习笔记之iReasoning MIB Browser

iReasoning MIB浏览器是一个强大和易于使用的工具由iReasoning SNMP API提供支持。 MIB浏览器是工程师管理启用SNMP的网络设备和...

4163

扫码关注云+社区

领取腾讯云代金券