js修改table字体及表格边框样式
记录js修改table样式及颜色，方便以后查阅。
·
1.实例：js修改table字体及table边框样式
以下为完整代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ee</title>
<style >
.table3 {
width: 500px;
height: 50px;
font-size: 80%;
color: black;
}
.table3 th {
width: 25%;
border: rgba(53, 182, 237, 1) 2px solid;
}
.table4 {
width: 500px;
height: 100px;
font-size: 70%;
text-align: center;
}
.table4 td {
width: 25%;
line-height: 2.3rem;
border: rgba(53, 182, 237, 1) 2px solid;
}
</style>
</head>
<body>
<table class="table3" cellpadding="0" cellspacing="0">
<tr>
<th>设备名称</th>
<th>预警信息</th>
<th>预计时间</th>
<th>倒计时</th>
</tr>
</table>
<table class="table4" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>aaaaaaa</td>
<td>sss</td>
<td>11:36:28</td>
<td class="checkstate">處理中</td>
</tr>
<tr>
<td>adasdaqwa</td>
<td>sss</td>
<td>11:36:35</td>
<td class="checkstate">異常中</td>
</tr>
<tr>
<td>adsadsad</td>
<td>sss</td>
<td>11:20:20</td>
<td class="checkstate">0.62min</td>
</tr>
<tr>
<td>asadsaad</td>
<td>xxx</td>
<td>11:15:20</td>
<td class="checkstate">0.80min</td>
</tr>
</tbody>
</table>
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
setfontcolor();//修改表格中字体颜色
setsystle();//修改表格边框颜色
})
function setfontcolor() {
//根据内容不同改变隔行的字体颜色
var stas = ["處理中", "異常中"];
$(".table4").find("tr").each(function () {
for (var i = 0; i < stas.length; i++) {
if ($(this).children(' td:eq(3)').text() == stas[0]) {
$(this).css('color', 'red');
}
if ($(this).children(' td:eq(3)').text() == stas[1]) {
$(this).css('color', 'red');
}
}
});
}
//设置表格样式
function setsystle(){
$('.table3 tr').each(function () {
$(this).children('th').each(function (i) {
if (i == 2) {
$(this).css('border', '#FF9900 1px solid');
}
if (i == 3) {
$(this).css('border', '#FF9900 1px solid');
}
})
})
$('.table4 tr').each(function () {
$(this).children('td').each(function (i) {
if (i == 2) {
$(this).css('border', '#FF9900 1px solid');
}
if (i == 3) {
$(this).css('border', '#FF9900 1px solid');
}
})
})
}
</script>
</body>
</html>
2.图片效果
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
1
0- 0
已为社区贡献2条内容
所有评论(0)