在写表格插件的时候，要不断的进行表格优化，才会让界面的感观变得越来越好看，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>
