Home How to find first tr with ID that does not have a matching attribute via jQuery

Questions

How to find first tr with ID that does not have a matching attribute via jQuery

August 25, 2022

I’ve been trying to solve this but no luck so far. I have the following HTML…

<table id="datatable">
  <tbody id="datarows">
    <tr id="row1" class="datarow" style="display: table-row;">...</tr>
    <tr></tr>
    <tr id="row2" class="datarow" style="display: table-row;">...</tr>
    <tr></tr>
    <tr id="row3" class="datarow" style="display: table-row;">...</tr>
    <tr></tr>
    <tr id="row4" class="datarow">...</tr>
    <tr></tr>
    <tr id="row5" class="datarow">...</tr> 
    <tr></tr>
    <tr id="row6" class="datarow">...</tr> 
  </tbody>
</table>

Why does my JavaScript want to target row1, when it’s supposed to target row4? Or perhaps there is an intuitive to say, add the style attribute only to the next #row<number> that doesn’t have it…? am I close?

    window.jQuery("#datatable #datarows tr[id^='row']:not([style='display: table-row']:first)").css({"display":"table-row"});

>Solution :

:first should after not() paranthesis not after the attribute brackets

const element = window.jQuery("#datatable #datarows tr[id^='row']:not([style*='display: table-row']):first")

console.log(element)

element.css({"display":"table-row"});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="datatable">
  <tbody id="datarows">
    <tr id="row1" class="datarow" style="display: table-row;">...</tr>
    <tr></tr>
    <tr id="row2" class="datarow" style="display: table-row;">...</tr>
    <tr></tr>
    <tr id="row3" class="datarow" style="display: table-row;">...</tr>
    <tr></tr>
    <tr id="row4" class="datarow">...</tr>
    <tr></tr>
    <tr id="row5" class="datarow">...</tr> 
    <tr></tr>
    <tr id="row6" class="datarow">...</tr> 
  </tbody>
</table>