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.图片效果
