My goal is to extract the most recent td element from the latest tr within an HTML table, ensuring that the latest td does not belong to the disabled class.
I am attempting to achieve this using pure JavaScript with CSS selectors (without relying on jQuery). Despite trying multiple approaches, I have been unsuccessful so far, encountering either null results or error messages stating "invalid selector". The solution provided in a Stack Overflow thread here has also failed to work for me.
Here are some of my attempts:
var table = document.getElementById('example');
var test1 = table.querySelector('tr:last-child > td:nth-last-child(:not(.disabled))');
var test2 = table.querySelector('tr:last-child > td:nth-last-child:not(.disabled)');
var test3 = table.querySelector('tr:last-child > td:nth-last-child(1 of :not(.disabled))');
var test4 = table.querySelector('tr:last-child > td:not(.disabled):last-child');
For instance:
<table id="example">
<tr>
<td> ... </td>
<td class="disabled"> ... </td>
<td> ... </td>
</tr>
<tr>
<td class="disabled"> ... </td>
<td> ... </td>
<td> ... </td>
</tr>
<tr>
<td> ... </td>
<td> Value I want </td>
<td class="disabled"> ... </td>
</tr>
</table>
In this scenario, my objective is to capture the value of Value I want, but I seem unable to do so. Can anyone identify what might be going wrong?