你们让我起个名啊 2017-11-22 02:21 采纳率: 42.3%
浏览 6158
已结题

前端根据值改变背景颜色

我自己写了个简单页面测试没有问题,但是放在项目中却没有效果,请问是问什么?

测试页面代码

 <!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<script type="text/javascript" language="javascript">
           $(function(){
                       $("#contentTable .test").each(function(){
                            var val = $(this).text();
                            if (val == "是"){
                                var $pat = $(this).parent();
                                $pat.css("background", "blue")
                            }else if(val =="否"){
                                                                var $pat = $(this).parent();
                                $pat.css("background", "yellow")
}
else {
var $pat = $(this).parent();
$pat.css("background", "white")
}
                         })
                });

</script>

</head>

<body>

      <table id="contentTable" style="text-align: center;" width="100%" border="1PX">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
                <tr><td class="test">是</td><td> A2 </td> <td>A3</td> </tr>
                <tr><td class="test">是</td><td> A2 </td> <td>A3</td> </tr>
                <tr><td class="test">否</td> <td>  B2</td><td>B3</td> <tr><td class="test">1</td><td> A2 </td> <td>A3</td> </tr> </tr>
           </table>
</body>
</html>

相关代码

 <script type="text/javascript" >
    $(function() {
        $("#contentTable .cloc").each(function() {
            var val = $(this).text();

            if (val == "是") {
            var $pat = $(this).parent();
            $pat.css("background", "blue")
            }else if (val == "否") {
                var $pat = $(this).parent();
                $pat.css("background", "yellow")
            } else {
                var $pat = $(this).parent();
                $pat.css("background", "white")
            }
        })
    });

</script>

jsp

    <table id="contentTable" class="table table-striped table-bordered table-condensed" >
        <thead>
            <tr>
                <th class="sort-column deviceid">设备编码</th>
                <th class="sort-column intime">入库时间</th>
                <th class="sort-column devicename">名称</th>
                <th class="sort-column brand">品牌</th>
                <th>型号</th>
                <th>单位</th>
                <th class="sort-column price">采购价值</th>
                <th>设备系列号</th>
                <th>零备件级别</th>
                <th>到货时间</th>
                <th class="sort-column isout">是否出库</th>
                <th class="sort-column coucount">出库次数</th>
                <th class="testcol">存储库位</th>
                <th>定检周期</th>
                <th>设备状态</th>
                <th>报废标志</th>
                <th>备注</th>
                <shiro:hasPermission name="storagewarehouse:tInventoryTable:edit"><th>操作</th></shiro:hasPermission>
            </tr>
        </thead>

        <tbody id ="tInventoryTableList"  >

        <c:forEach items="${page.list}" var="tInventoryTable">
            <tr >
                <td><a href="${ctx}/storagewarehouse/tInventoryTable/form?id=${tInventoryTable.id}">
                    ${tInventoryTable.deviceid}
                </a></td>
                <td>
                    <fmt:formatDate value="${tInventoryTable.intime}" pattern="yyyy-MM-dd HH:mm:ss"/>
                </td>
                <td>
                    ${tInventoryTable.devicename}
                </td>
                <td >
                    ${tInventoryTable.brand}
                </td>
                <td>
                    ${tInventoryTable.model}
                </td>
                <td>
                    ${tInventoryTable.unit}
                </td>
                <td>
                    ${tInventoryTable.price}
                </td>
                <td>
                    ${tInventoryTable.serialnum}
                </td>
                <td>
                    ${fns:getDictLabel(tInventoryTable.level, 't_level', '')}
                </td>
                <td>
                    <fmt:formatDate value="${tInventoryTable.arrivalt}" pattern="yyyy-MM-dd HH:mm:ss"/>
                </td>
                <td class="cloc" >
                    ${fns:getDictLabel(tInventoryTable.isout,'yes_no','')}
                </td>
                <td>
                    ${tInventoryTable.coucount}
                </td>
                <td>
                    ${tInventoryTable.location}
                </td>
                <td>
                    ${tInventoryTable.fegularcycle}
                </td>
                <td>
                ${fns:getDictLabel(tInventoryTable.status ,'t_status','')}
                </td>
                <td>
                    ${fns:getDictLabel(tInventoryTable.scrapped, 't_scrapped', '')}
                </td>
                <td>
                    ${tInventoryTable.remark}
                </td>
                <shiro:hasPermission name="storagewarehouse:tInventoryTable:edit"><td>
                    <a href="${ctx}/storagewarehouse/tInventoryTable/form?id=${tInventoryTable.id}">修改</a>
                    <a href="${ctx}/storagewarehouse/tInventoryTable/delete?id=${tInventoryTable.id}" onclick="return confirmx('确认要删除该库存吗?', this.href)">删除</a>
                </td></shiro:hasPermission>
            </tr>
        </c:forEach>
        </tbody>
    </table>
  • 写回答

7条回答 默认 最新

  • Drizzly_ 2017-11-22 02:35
    关注

    //计算颜色值的反色,colorStr格式为:rgb(0,0,0),#000000或者#f00
    function reversalColor(colorStr){
    var sixNumReg = /^#(\d{2})(\d{2})(\d{2})$/ig;
    var threeNumReg = /^#(\d{1})(\d{1})(\d{1})$/ig;
    var rgbReg = /^rgb((\d{1,3}), (\d{1,3}), (\d{1,3}))$/ig;
    var c1=0, c2=0, c3=0;
    var parseHexToInt = function(hex){
    return parseInt(hex,16);
    };

    var parseIntToHex = function(int){
    return int.toString(16);
    };
    this.parse = function(){
    if(sixNumReg.test(colorStr)){
    sixNumReg.exec(colorStr);
    c1 = parseHexToInt(RegExp.$1);
    c2 = parseHexToInt(RegExp.$2);
    c3 = parseHexToInt(RegExp.$3);
    } else if(threeNumReg.test(colorStr)){
    threeNumReg.exec(colorStr);
    c1 = parseHexToInt(RegExp.$1+RegExp.$1);
    c2 = parseHexToInt(RegExp.$2+RegExp.$2);
    c3 = parseHexToInt(RegExp.$3+RegExp.$3);
    } else if(rgbReg.test(colorStr)){
    //rgb color 直接就是十进制,不用转换
    rgbReg.exec(colorStr);
    c1 = RegExp.$1;
    c2 = RegExp.$2;
    c3 = RegExp.$3;
    } else {
    throw new Error("Error color string format. eg.[rgb(0,0,0),#000000,#f00]");
    }
    c1 = parseIntToHex(255 - c1);
    c2 = parseIntToHex(255 - c2);
    c3 = parseIntToHex(255 - c3);

    return '#' + (c1<10?'0'+c1:c1) + (c2<10?'0'+c2:c2) + (c3<10?'0'+c3:c3);
    };
    }

    评论

报告相同问题?

悬赏问题

  • ¥50 winform中使用edge的Kiosk模式
  • ¥15 关于#python#的问题:功能监听网页
  • ¥50 comsol稳态求解器 找不到解,奇异矩阵有1个空方程返回的解不收敛。没有返回所有参数步长;pid控制
  • ¥15 怎么让wx群机器人发送音乐
  • ¥15 fesafe材料库问题
  • ¥35 beats蓝牙耳机怎么查看日志
  • ¥15 Fluent齿轮搅油
  • ¥15 八爪鱼爬数据为什么自己停了
  • ¥15 交替优化波束形成和ris反射角使保密速率最大化
  • ¥15 树莓派与pix飞控通信