怎样加js让所有‘未报价’变成红色啊 改了后添加数据也可以自动变红

img


<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="css/layui.css" media="all">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

</head>
<style>
    .top {
        position: relative;
        width: 100%;
        height: 30px;
    }

    .baojia {
        position: absolute;
        top: 10px;
        left: 10px;

    }

    .city {
        position: absolute;
        width: 150px;
        height: 29px;
        left: 80px;
        top: 5px;
        border: 1px solid rgb(190, 186, 186);
    }

    .sousuo {
        position: absolute;
        top: 5px;
        left: 240px;
        width: 150px;
        height: 27px;
        border: 1px solid rgb(184, 181, 178);
        color: rgb(184, 181, 178);
    }

    .layui-btn {
        position: absolute;
        left: 400px;
        top: 5px;
    }
</style>

<body>
    <div class="top">
        <div class="baojia">报价状态</div>
        <select name="city" class="city" lay-verify="">
            <option value="">全部</option>
            <option value="010">未报价</option>
            <option value="021">已报价</option>
        </select>
        <input class="sousuo" type="text" placeholder="请输入关键字">
        <button class="layui-btn layui-btn layui-btn-sm">查询</button>
    </div>


    <table class="layui-table" lay-data="{height: 'full-40'
        , cellMinWidth: 80, page: true
        , limit:30
        , url:'user.json'
    }">
        <thead>
            <tr>
                <th lay-data="{field:'id', width:80}">序号</th>
                <th lay-data="{field:'username', width:80}">状态</th>
                <th lay-data="{field:'sex', width:90}">交期要求</th>
                <th lay-data="{field:'city', width:90}">客户简称</th>
                <th lay-data="{field:'sign', Width:90,align:'center'}">颜色编号</th>
                <th lay-data="{field:'experience', width:90,align:'center'}">颜色名称</th>
                <th lay-data="{field:'logins', minWidth: 100,align:'center'}">坯布规格</th>
                <th lay-data="{field:'wealth', width:100}">下单日期</th>
                <th lay-data="{field:'wealth', width:100}">后整</th>
                <th lay-data="{field:'wealth', width:100}">报价日期</th>
                <th lay-data="{field:'classify', width:100 }">染色</th>
                <th lay-data="{field:'score', minWidth: 100, align: 'center'}">总成本</th>
            </tr>
        </thead>
    </table>


    <script src="layui.js" charset="utf-8"></script>

    <script>
        layui.use('table', function () {
            var table = layui.table;
        });

    </script>

</body>

</html>

拿到数据 list 后做处理，循环 list 然后判断报价的字段，从而添加颜色，至于具体的怎么拿到 list ,用 ajax 还是其他的方法就得看你自己的了

原生的html的话就写js判断，如果值为“未报价“，加上一个class红色样式即可

用 "templet - 自定义列模板" 来实现

只能够做判断，先设置好未报价的样式，然后 if 判断，未报价的话动态添加class类名