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

user_957186 0
Viewed 43

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"});
jquery javascript
2 Answers

: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>

user_118879020

I think this will work:

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

It should get match all the tr's with "row" in the id within the tbody "datarows" of the table "datatable" that have no style attribute. It will filter those tr's for the first one and apply your "display: table-row" style.

user_169773000
Related