Is there a way to find the number of rows of any table using jQuery?

Question

I am setting up various HTML tables on my web page and want to find a way of knowing the number of rows each of them contain in jQuery without using classes or id in the tables. Is this possible?

I have already tried linking up an HTML button with a click event handler to get the closest table and compute its length, but I seem to be doing something wrong here.

I would like to find the length of any table to be able to change the action of the button, depending on the number of rows left in the table.

The actual output of rowCount is 1, whenever I try it on any size table.

$(document).on("click", "button.x-cross", function() {
  var rowCount = $(this).closest("table >tr").length;

  // Conditions using the rowCount variable

  return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <span>First row</span>
    </td>
    <td>
      <button type="button" class="x-cross">X</button>
    </td>
  </tr>
</table>

Rory McCrossan · Accepted Answer · 2019-08-05 13:35:49Z

3

The issue in your code is that the table is the closest parent element to the button, not table > tr, hence that selector doesn't find anything. If you separate the selector in to closest() and then find(), it works:

$(document).on("click", "button.x-cross", function() {
  var rowCount = $(this).closest("table").find('tr').length;
  console.log(rowCount);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <span>First row</span>
    </td>
    <td>
      <button type="button" class="x-cross">X</button>
    </td>
  </tr>
</table>

<table>
  <tr>
    <td>
      <span>First row</span>
    </td>
  </tr>
  <tr>
    <td>
      <span>Second row</span>
    </td>
  </tr>
  <tr>
    <td>
      <span>Third row</span>
    </td>
    <td>
      <button type="button" class="x-cross">X</button>
    </td>
  </tr>
</table>

edited Aug 5, 2019 at 13:35

answered Aug 5, 2019 at 13:25

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Louis Durand Over a year ago

Thank you very much for the fast answer, it solved my problem. But I can't wrap my head around the table being the closest parent to the button as you said.

Rory McCrossan Over a year ago

The selector you provide to closest() is used to match the parent element in a loop. In other words it check if the table > tr selector matches the parent tr, which it doesn't. Similarly, it doesn't match the table either, hence nothing is found. You need to separate the logic for finding the closest parent table, then finding all the tr

Deepak A · Accepted Answer · 2019-08-05 13:40:23Z

1

You can use eq to select the table of your choice

console.log('First :' + $('table').eq(0).find('tr').length)
console.log('Second :' + $('table').eq(1).find('tr').length)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <td>
      <span>First row</span>
    </td>
    <td>
     
    </td>
  </tr>
</table>

<table border="1">
  <tr>
    <td>
      <span>Second row</span>
    </td>
    <td>
     
    </td>
  </tr>
    <tr>
    <td>
      <span>Third row</span>
    </td>
    <td>
     
    </td>
  </tr>
</table>

answered Aug 5, 2019 at 13:40

Deepak A

1,6361 gold badge9 silver badges16 bronze badges

Collectives™ on Stack Overflow

Is there a way to find the number of rows of any table using jQuery?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related