How do I catch the value in a td element using jquery and change a different background color of the td elements based on the td value caught?
I spent some time today looking at examples for iterating over a table and its rows using JQuery, after a lot of trial errors I was able to do it. But I ran into a problem trying to get the value from a td element, so I can change the color of another td element. I have a data relay. The markup looks like 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>
I originally had a label at the td class = level and was able to highlight what I wanted in the OnItemDataBound event. But I want to do it with JQuery.
Here's what I came up with ...
$(document).ready(function () {
$("#Table tr").each(function () {
var cell = $(this).find("td.level").text();
if (cell == "0") $("#header").css('background-color', 'purple');
});
})
This is 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 ... What I am trying to do is every time the ID Option is 0, I want to have a background color to map it to the Global Group ... IE handle Option ID is 0, so the td element which has a handle, must have its background color changed, etc.
What the code does is add a background color to the very first td element in the Global Group, but as you can see the parameter ID for the floor is 1 and shouldn't have a background color.
So can someone point out where I am going wrong?
thank
source to share
You want to change the background of an element header
that is the same tr
as the current element level
, 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 the element id must be unique, use header
as a 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 your code, since you are using the id selector to find the title element, it will always return the first element with the id header
source to share
BillPull is correct that your ID header is not good practice. IDs should only appear once per page, try to make a class
OR
You can use jquery.siblings (). Your code should read something similar to this:
var cell = $(this).find("td.level");
if (cell.text() == "0") {
cell.siblings('td').css('background-color', 'purple');
}
Example: JFiddle
source to share