根据列值更改行的颜色

Question

我尝试了this example但没有工作。任何人都可以帮我解决问题吗？

 <table id="enquiryListTable" class="responsive-table  striped " >
                <thead>
                    <tr class="teal lighten-1 row white-text" style="cursor: pointer"
                        id="tableHeading">
                        <th  id="tableHeadingCheckboxRow"><input type="checkbox" class="filled-in"
                            id="tableHeadingCheckbox"><label class="text-black" for="test5"></label></th>
                        <th  id="tableHeadingName"><div class="col s8 ">Agent / Customer</div><div  class="col s3"><i class="material-icons">swap_vert</i></div></th>
                        <th  id="tableHeadingDateFrom"><div class="col s8 ">Check-in</div><div class="col s3"><i class="material-icons  ">swap_vert</i></div></th>
                        <th   id="tableHeadingDateTo"><div class="col s8 ">Check-out</div><div class="col s3"><i class="material-icons ">swap_vert</i></div></th>
                        <th  id="tableHeadingStatus"><div class="col s8">Status</div><div class="col s3"><i class="material-icons  ">swap_vert</i></div></th>
                    </tr>
                </thead>
                <tbody style="display: none;" id=enquiryListTableBody>
                    <c:forEach items="<%=enquiryList%>" var="EnquiryList" varStatus="loop">
                        <tr id="enquiryrow${loop.index}" class="enquiryListTableRow teal lighten-4"  style="font-size: 14px; font-family: sans-serif; font-weight: normal;">
                            <td style="cursor: pointer" 
                             id="checkboxcolumn${loop.index}"><input type="checkbox" class="filled-in" 
                                id="checkbox${loop.index}"><label class="text-black" for="test5"><%-- ${loop.index+1} --%></label></td>
                            <td  style="cursor: pointer" class="${loop.index}" >
                                            <label class="black-text" id="enquiryListAgentNameLabel${loop.index}">${EnquiryList.agent}</label>
                                            <label class="black-text" id="enquiryListAgencyNameLabel${loop.index}">${EnquiryList.agencies.name}</label>
                                            <label class="black-text" id="enquiryListUserNameLabel${loop.index}">${EnquiryList.user.name}</label>
                                            <label class="black-text" id="enquiryListUserEmailLabel${loop.index}">${EnquiryList.user.email}</label>
                                            <label class="black-text" id="enquiryListUserPhoneLabel${loop.index}">${EnquiryList.user.phoneNumber}</label></td>
                            <td  style="cursor: pointer" class="${loop.index}" >${EnquiryList.fromDate}</td>
                            <td  style="cursor: pointer" class="${loop.index}" >${EnquiryList.toDate}</td>
                            <td id="statusEnquiryList" style="cursor: pointer" class="${loop.index}" >${EnquiryList.status.status}</td>
                        </tr>
                    </c:forEach>
                </tbody>
            </table>

和

$("tr").each(function(){
       var col_val = $(this).find("td:eq(1)").text();
          if ($.trim(col_val) == "Offer Generated"){
            $(this).addClass('green');  //the selected class colors the row green//
           } else {
              $(this).addClass('red');
        }
    });

如果状态为“Offer Generated”，我想将整行显示为绿色。任何帮助..我都尝试过stackoverflow中的每个解决方案。

Answer 1

Status是行的最后一列。因此，要获得它的价值，请使用var col_val = $(this).find("td:last").text();。

<强>的Javascript

$("tr").each(function(){
    var col_val = $(this).find("td:last").text();
    if ($.trim(col_val) == "Offer Generated"){
        $(this).addClass('green');  //the selected class colors the row green//
    } else {
        $(this).addClass('red');
    }
});