Count empty or not empty TD with jquery

Question

Usually input and textarea can be checkt and counted by its selector and length.

e.g. Counting empty inputs and textareas:

$('input[value=""]').length;

$('textarea[value=""]').length;

How this can be done with a Table ?

<table>
    <tr>
        <td>aaa</td>
        <td></td>
        <td></td>
        <td>aaa</td>
    </tr>
</table>

The count should be 2. I know I could use a $.each(...) but I would prefere a simple $(selector).length solution.

EDIT: corrected the topic a bit to get this small confusion away, sorry! :D

The title asks about "not empty" elements, while your example gets empty elements. Which are you looking for? — ssube
– ssube, Commented Apr 9, 2015 at 14:56
either :empty or .filter or .map... The examples are not coherent with the question, though. — briosheje
– briosheje, Commented Apr 9, 2015 at 14:57
beware that any whitespace inside a tag will not be considered :empty ... example <td> </td> won't be selected as :empty — charlietfl
– charlietfl, Commented Apr 9, 2015 at 15:16
@charlietfl thats ok. Its my source and even there is something in the table or its really empty. The table is build by a ajax-request and data is trimmed so this will never be a problem. But thanks for that hint. — Dwza
– Dwza, Commented Apr 9, 2015 at 19:48
just worth knowing...can be frustrating on page where line breaks or other space occurs and :empty doesn't do what you think it should — charlietfl
– charlietfl, Commented Apr 9, 2015 at 19:55

Rory McCrossan · Accepted Answer · 2018-02-04 10:49:05Z

10

You can use the :empty selector:

console.log($('table td:empty').length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>aaa</td>
    <td></td>
    <td></td>
    <td>aaa</td>
  </tr>
</table>

As @Pointy mentions, you can invert the behaviour using :not() if you want to select td elements that do have some content:

$('table td:not(:empty)').length

edited Feb 4, 2018 at 10:49

answered Apr 9, 2015 at 14:55

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

7 Comments

Rory McCrossan Over a year ago

That would work, although the OP says Counting empty inputs and textareas: and the code is doing the same with inputs by empty value.

Pointy Over a year ago

I agree, the OP is confusing. It's one or the other :)

Dwza Over a year ago

sorry for this confusion. :) In the end its not nessesary if its count on empty or filled. But that's what i was looking for. Thx

Muhammad Omer Aslam Over a year ago

sorry if I am doing something wrong but using console.log($('table td:not(:empty)').length) with the above example does not output anything in console @Pointy

Rory McCrossan Over a year ago

@MuhammadOmerAslam there may be an error in your logic somewhere then, as it works fine: jsfiddle.net/y044mtzo

|

mohamedrias · Accepted Answer · 2015-04-09 14:56:41Z

2

You can make use of :empty pseudo selector to check whether a DOM element contains data or not.

$("td:empty").length

This will give you empty td count

If you want to count the non empty td elements then:

$("td:not(:empty)").length

answered Apr 9, 2015 at 14:56

mohamedrias

18.6k3 gold badges41 silver badges47 bronze badges

Comments

Dmitri Tsoy · Accepted Answer · 2015-04-09 14:57:01Z

2

try this one

 $('td:not(empty)')

answered Apr 9, 2015 at 14:57

Dmitri Tsoy

5896 silver badges21 bronze badges

Collectives™ on Stack Overflow

Count empty or not empty TD with jquery

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related