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

js修改table字体及表格边框样式相关推荐

CSS设置原生table表格边框样式（添加表格横线）（附最后表格td画斜线）
table表格边框样式: 推荐这种原理: 只对table td设置左与上边框: 对table设置右与下边框: <style> .table-c table{border-right:1p ...
CSS如何设置html table表格边框样式
CSS如何设置table表格边框样式对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对table和td技巧性设置表格边框 4.对table和td设 ...
php表格所有边框实线,css表格怎么添加边框样式？css表格边框样式总结（附完整实例）...
本篇文章主要讲述的就是关于css表格添加边框样式,这里还有关于css表格边框样式的总结,还有css表格边框的完整实例.接下来就让我们一起来看这篇文章吧首先我们先看看如何利用css来给表格添加边框: ...
css设置html表格边框颜色,互联网常识：CSS如何设置htmltable表格边框样式
设置表格边框样式的方法:1.给table元素添加"border:边框宽度边框样式边框颜色"样式,可给整个表格设置边框样式:2.给td元素添加"border:边框宽度 ...
css隐藏表格线,用CSS改变（隐藏）表格边框样式
用CSS改变表格边框样式,很实用的一种方法. 制作方法: 将下面的代码复制到 ~里,此为隐藏下边框 style="border-collapse: collapse; border-bott ...
如何修改控件边框的样式_Excel如何设置表格边框样式，记住这几个关键属性就懂了...
Excel表格边框的设置,对于制作一个漂亮的工作表,十分有用. 由于审美的差异,我们通常做的表格都是以黑色边框白底为主,或者说,有些人根本不知道除了黑白表格还有带颜色的. 如何设置表格边框属性呢,下面 ...
java导出excel设置边框_Excel如何设置表格边框样式，记住这几个关键属性就懂了
Excel表格边框的设置,对于制作一个漂亮的工作表,十分有用. 由于审美的差异,我们通常做的表格都是以黑色边框白底为主,或者说,有些人根本不知道除了黑白表格还有带颜色的. 如何设置表格边框属性呢,下面 ...
table表格边框样式_如何在CAD创建、导入表格？原来CAD的表格功能这么强大
阅读本文前,请您先点击上面的"蓝色字体",再点击"关注",这样您就可以继续免费收到文章了.如果喜欢就关注订阅吧!也不要忘记点赞哦~亲,看的开心可以点个好看 . ...
html中表格边框好看的样式,table完美css样式 table表格边框样式
蕃薯耀2016年6月15日星期三一.的css样式边框线不会重复叠加,不会有些粗有些细,全部统一. /**/ -{ /*-moz--; --border-radius:5px; border-rad ...

js修改table字体及表格边框样式

js修改table字体及表格边框样式相关推荐

最新文章

热门文章