js-某个字段有值即把该行用颜色标记_js 根据值判断行颜色-优快云博客

本文介绍了一种在显示表格中突出显示特定分类数据的方法。通过后台SQL查询将所需分类排在前列，并使用前台标签根据分类字段值改变行背景色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题场景

需求：classfication字段98%为空，其余的为adsss，当值为adsss时把该行用红色标记下并排在前面。

解决方法

后台SQL查询的时候语句末尾加上order by classfication desc 实现排在前面；
前台用一个if标签设置tr的style。

效果

这里写图片描述

CODE

<c:choose>
                <c:when test="${not empty readyTestResultList}">
                    <c:forEach items="${readyTestResultList}" var="readyTestResult" varStatus="vs">
                    <tr class="main_info" id="tr${readyTestResult.id}"
                        <c:if test="${readyTestResult.classification!=null and readyTestResult.classification != ''}">
                            style="background:red;word-wrap:break-word;"
                        </c:if>
                        <c:if test="${readyTestResult.classification==null or readyTestResult.classification == ''}">
                            style="word-wrap:break-word;"
                        </c:if>
                    >
                        <td><input type="checkbox" onclick="setBgColor(this.parentNode.parentNode);" name="id" id="readyTestResultIds${readyTestResult.id}" value="${readyTestResult.id}"/></td>
                        <td>${vs.index+1}</td> 
                        <td>${readyTestResult.annoId1}</td>
                        <td>${readyTestResult.batchNum}</td>
                        <td>${readyTestResult.sampleNum}</td>
                        <td>${readyTestResult.gene}</td> 
                        <td>${readyTestResult.HGVS}</td>
                        <td>${readyTestResult.freqOrAvgNum}</td>
                        <td> 
                            <a href="javascript:show(${readyTestResult.id});">查看</a> |
                            <a href="javascript:edit(${readyTestResult.id});">修改</a> | 
                            <a href="javascript:deleteReadyTestResult(${readyTestResult.id});">删除</a>
                            <c:if test="${showIdRecycle==0}">
                                <a href="javascript:restoreReadyTestResult(${readyTestResult.id});">| 还原</a>
                            </c:if>
                        </td> 
                    </tr>
                    </c:forEach>
                </c:when>
            <c:otherwise>
                <tr>
                    <td colspan="32">没有相关数据</td>
                </tr>
            </c:otherwise>
        </c:choose>