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

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"  style="display: table-row;">...</tr>
    <tr></tr>
    <tr id="row2"  style="display: table-row;">...</tr>
    <tr></tr>
    <tr id="row3"  style="display: table-row;">...</tr>
    <tr></tr>
    <tr id="row4" >...</tr>
    <tr></tr>
    <tr id="row5" >...</tr> 
    <tr></tr>
    <tr id="row6" >...</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"});

CodePudding user response：

: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"  style="display: table-row;">...</tr>
    <tr></tr>
    <tr id="row2"  style="display: table-row;">...</tr>
    <tr></tr>
    <tr id="row3"  style="display: table-row;">...</tr>
    <tr></tr>
    <tr id="row4" >...</tr>
    <tr></tr>
    <tr id="row5" >...</tr> 
    <tr></tr>
    <tr id="row6" >...</tr> 
  </tbody>
</table>

CodePudding user response：

I think this will work:

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