当前位置：网站首页>JS modify table font and table border style

JS modify table font and table border style

2022-07-28 19:22:00 【Susan flower rain】

1. example ：js modify table Fonts and table Border style
Here is the complete code 

<!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> Equipment name </th>
            <th> Early warning information </th>
            <th> estimated time </th>
            <th> count down </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"> Processing </td>
            </tr>
            <tr>
                <td>adasdaqwa</td>
                <td>sss</td>
                <td>11:36:35</td>
                <td class="checkstate"> Abnormal </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();// Modify the font color in the table 
        setsystle();// Modify table border color 
    })
    function setfontcolor() {
    
        // Change the font color of interlaced lines according to different contents 
        var stas = [" Processing ", " Abnormal "];
        $(".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');
                }
            }
        });
    }
        // Set table style 
    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. Picture effect
Insert picture description here

原网站

版权声明
本文为[Susan flower rain]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/196/202207130614489720.html

边栏推荐

猜你喜欢

随机推荐