表格外掛-bootstrap table的隔行換色
阿新 • • 發佈：2018-12-10
在寫表格外掛的時候，要不斷的進行表格優化，才會讓介面的感觀變得越來越好看，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後前端妹子，愛程式設計，愛運營，愛折騰。 堅持總結工作中遇到的技術問題，堅持記錄工作中所所思所見，歡迎大家一起探討交流。