qq_35649402
你们让我起个名啊
2017-11-22 02:21

前端根据值改变背景颜色

5
  • 前端
  • javascript

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

测试页面代码

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

为你推荐

换一换