Jquery:- Count number of td in each tr

Question

How can I count td in each row, It should say row 1 have two td and row 3 have one td. I need to count td per row(tr)

$(function() {
  $('.Create-New-Order').click(function() {
    var total = $('#mytbl td').length;
    alert('tr count = ' + total);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<table border="1px solid red">
  <tr>
    <th>Name</th>
    <th>Email</th>
  </tr>
  <tbody id="mytbl">
    <tr>
      <td>sfdsd</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>sfdsd</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>sfdsd</td>
    </tr>
  </tbody>
</table>
<br>
<br>
<a href="#" class="Create-New-Order">Create-New-Order</a>

What have you tried so far. Please share your code. What do you want to do with the counts? Have you tried Google for tr and td select? — Peter Smith
– Peter Smith, Commented Dec 10, 2019 at 19:49
Does this answer your question? jQuery: count number of td in a table row — devlin carnate
– devlin carnate, Commented Dec 10, 2019 at 19:58
@devlincarnate its just counting rows not, cells in each row — developer
– developer, Commented Dec 10, 2019 at 20:01

j08691 · Accepted Answer · 2019-12-10 20:09:18Z

2

You need to loop over each row and then get the number of cells with $(this).find('td').length:

$('.Create-New-Order').click(function() {
  var total = $('#mytbl tr').each(function() {
    console.log($(this).find('td').length)
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<table border="1px solid red">
  <tr>
    <th>Name</th>
    <th>Email</th>
  </tr>
  <tbody id="mytbl">
    <tr>
      <td>sfdsd</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>sfdsd</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>sfdsd</td>
    </tr>
  </tbody>
</table>
<br>
<br>
<a href="#" class="Create-New-Order">Create-New-Order</a>

answered Dec 10, 2019 at 20:09

j08691

208k33 gold badges269 silver badges281 bronze badges

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

Comments

Alen.Toma · Accepted Answer · 2019-12-10 20:22:12Z

1

This is easy first get all rows the loop throw each and count the td.

See below

    $(function() {
      $('.Create-New-Order').click(function() {
        var trs=document.querySelectorAll("#mytbl tr")
        trs.forEach(function(tr){
          console.log(tr.querySelectorAll("td").length)
        })

        
      });
    });

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <table border="1px solid red">
      <tr>
        <th>Name</th>
        <th>Email</th>
      </tr>
      <tbody id="mytbl">
        <tr>
          <td>sfdsd</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>sfdsd</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>sfdsd</td>
        </tr>
      </tbody>
    </table>
    <br>
    <br>
    <a href="#" class="Create-New-Order">Create-New-Order</a>

edited Dec 10, 2019 at 20:22

answered Dec 10, 2019 at 20:13

Alen.Toma

4,8782 gold badges19 silver badges37 bronze badges

3 Comments

developer Over a year ago

Any idea how can we do same in pure js?

Alen.Toma Over a year ago

Yes will change it for you

Alen.Toma Over a year ago

See upp did it with pure js

Collectives™ on Stack Overflow

Jquery:- Count number of td in each tr

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related