html - How to catch the value in a td element with jquery and change another td elements background color based on the caught td's value? -


i've spent time today looking @ examples iterate through table , rows jquery, after lot of trial error able it. running issue trying value td element, can change color of td element. have repeater bound datatable. markup looks this..

<div> <table id="table">     <tr>         <th>global group         </th>         <th>option id         </th>     </tr>     <tr>         <asp:repeater id="repeater1" runat="server" onitemdatabound="repeater1_itemdatabound">             <itemtemplate>                 <tr align="left">                     <td id="header">                         <asp:label id="lbloptionname" runat="server" text='<%#eval("globalgroup_name") %>'></asp:label>                     </td>                     <td class="level"><%#eval("globalgroup_level")%></td>                 </tr>             </itemtemplate>         </asp:repeater>     </tr> </table> 

originally had label in td class=level, , able highlight wanted in onitemdatabound event. want jquery instead.

this came with...

$(document).ready(function () {         $("#table tr").each(function () {             var cell = $(this).find("td.level").text();             if (cell == "0") $("#header").css('background-color', 'purple');         });     }) 

this table data

global group     option id floor                1 hardwood             1 parkay               1 handle               0 brass                1 stainless            1 nickel               1 door                 0 hardwood             1 steel                1 screen               1 

etc... been trying everytime option id 0, want have background color matching global group... i.e handle's option id 0, td element has handle in should have background color changed , on.

what code doing adding background color first td element under global group can see option id floor 1 , shouldn't have background color.

so can point out going wrong?

thanks

you want change background of header element in same tr current level element so

$(document).ready(function () {     $("#table tr").each(function () {         var cell = $(this).find("td.level").text();         if (cell == "0") {             $(this).find(".header").css('background-color', 'purple');         }     }); }) 

also since id of element must unique, use header class

<tr align="left">     <td class="header">         <asp:label id="lbloptionname" runat="server" text='<%#eval("globalgroup_name") %>'></asp:label>     </td>     <td class="level">         <%#eval( "globalgroup_level")%>     </td> </tr> 

in code, since using id selector find header element, return first element id header


Comments

Popular posts from this blog

apache - PHP Soap issue while content length is larger -

asynchronous - Python asyncio task got bad yield -

javascript - Complete OpenIDConnect auth when requesting via Ajax -