Question 36963 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

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

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"});
Tags:

2

Answers


  1. 0

    :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>
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search