On my asp.net web page, I have a repeater that displays a table with various fields in each row. I am trying to make it so that when the value of a dropdown within a repeater row changes, the entire row is highlighted in color. While I have achieved this server-side, I am looking to implement this functionality on the client-side instead.
Below is the code snippet:
HTML
<table id="InvoerUrenTable" class="InvoerUrenLeftMargin100">
<asp:Repeater ID="urenRepeater" runat="server">
<ItemTemplate>
<tr runat="server" ID="itemTemplateRow">
...
...
...
<td>
<asp:DropDownList runat="server" ID="projectDropDown"></asp:DropDownList>
</td>
...
...
...
...
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
<script type="text/javascript">
$(document).ready(function () {
$('#projectDropDown').change(function () {
var index = $(this).parent().children().index($(this));
$('#urenRepeater tr:nth-child(' + index + ')').addClass("highlight")
});
});
</script>
CSS
.highlight {
background-color: #E52718;
}
The script presented above does not seem to be working as expected. Can someone point out what might be going wrong?
UPDATE 06/07/2020
I discovered that I was targeting the incorrect row ID for changing the class attribute.
<script type="text/javascript">
$(document).ready(function () {
$('.projDropDown').change(function () {
var index = $(this).parent().children().index($(this));
$('#body_urenRepeater_itemTemplateRow_' + index).addClass("highlight")
});
});
</script>
However, I am now facing an issue where the index is incorrect, and it highlights the first row every time I change the value in one of the dropdowns. Any suggestions on how to fix this?