表格插件-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>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018.11.18 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读