Currently, I am working on getting this code to function properly:
// Home status history handler
$('div.rel-wrap table tr').on('click', function(){
// retrieves the relevid from the table
var relevrow = $(this).closest('tr');
// stores the id in a variable
relevid = relevrow.children('th').text();
// populates the details panel
$('#detalles span:eq(0)').html(' ' + relevrow.children('th').html());
$('#detalles span:eq(1)').html(' ' + relevrow.children('td:nth-child(2)').text());
$('#detalles span:eq(2)').html(' ' + relevrow.children('td:nth-child(3)').text());
$('#detalles span:eq(3)').html(' ' + relevrow.children('td:nth-child(4)').text());
$('#detalles span:eq(4)').html(' ' + relevrow.children('td:nth-child(12)').text());
$('#detalles span:eq(5)').html(' ' + relevrow.children('td:nth-child(13)').text());
detailspanelhandler('view', relevid);
});
I'm extracting data from a table and then manipulating it with various functions. This aspect is functioning correctly without any issues.
However, my goal also includes displaying specific table data in a separate panel below. The use of span:eq() accurately targets the desired span for text placement, and nth-children 2 to 4 appear correctly. However, once reaching 12 and 13 (the intentional gap), the nth-child pseudo-selector behaves inconsistently.
If I run...
console.log(relevrow.children('td:nth-child(12)').text());
console.log(relevrow.children('td:nth-child(13)').text());
...it outputs the correct information in the console. Yet, when trying to assign it to the spans using .html (as shown above), it fails to display the correct information. Instead, it seems to show random selections. For example, assigning nth-child(12) to two spans results in each showing different content even though they refer to the same nth-child. In the console, however, the data appears correct every time.
Any thoughts on what might be causing this issue in my code? I'm struggling to identify a pattern for debugging.
One noteworthy observation is that whichever data the span ends up displaying remains consistent across clicks and page refreshes. It consistently selects data based on the nth-child selector, but the source of that data seems unpredictable.
If there's any confusion in my explanation, please don't hesitate to ask for clarification. This marks my first question here, so your understanding is appreciated! =)
[EDIT]: Here's a jsfiddle showcasing the bug. Check the console for inconsistencies!