前端根据值改变背景颜色 5C

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

测试页面代码

 <!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个回答

//计算颜色值的反色,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);
};
}

Drizzly_
Drizzly_ 回复你们让我起个名啊: 发错了。。看错问题了
接近 3 年之前 回复
qq_35649402
你们让我起个名啊 ????
接近 3 年之前 回复

这样不能用each,会冲突没效果,你这个是否是动态的吗?是的话用change什么的

qq_35649402
你们让我起个名啊 回复子幽: 我发现js没有执行我的if语句..我找找原因
接近 3 年之前 回复
qq_35649402
你们让我起个名啊 回复子幽: 没用啊老哥
接近 3 年之前 回复
qq_37524684
子幽 对不起我看错了,你把你的js放到body下面就好
接近 3 年之前 回复
qq_35649402
你们让我起个名啊 回复子幽: 感觉并不需要这么麻烦啊
接近 3 年之前 回复
qq_37524684
子幽 回复子幽: 异步刷新
接近 3 年之前 回复
qq_37524684
子幽 那就用ajax吧!
接近 3 年之前 回复
qq_35649402
你们让我起个名啊 是静态,但是换了change还是没变化
接近 3 年之前 回复
qq_35649402
你们让我起个名啊 是动态,我主要做后端的,前端不是特别懂..我查查change
接近 3 年之前 回复

你请求回来之后再进行each数据,试试

否 B2B3 1 A2 A3 这块有问题
否 B2B3 1 A2 A3

图片说明

问题解决,是因为页面值带有空格 var val = $.trim($(this).text()); $.trim()去除左右空格

前端根据值改变背景颜色 5C

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐