check if my html table is empty using javascript

Question

How to check if my html table is empty. Remember that the following table must be considered as empty table as there are no rows except headings.

<table style="float: left;text-align: center;" id="Table1"">
     <th style="width: 11%;">Item Id</th>
     <th style="width: 44%;">Item Name</th>
     <th style="width: 11%;">Quantity</th>
     <th style="width: 18%;">Trade Price</th>
     <th style="width: 16%;">Price</th>
     <th style="width: 7%;" id="non-printable">Delete</th>
</table>

These headings are fixed and I'm generating rows using javascript. I have to reset my javascript counter if table is empty. How can I check that the table is empty using javascript or jquery?

I'm incrementing in another counter while I am adding row with javascript.

Can you please add what you have tried so far in javascript? — Prashant
– Prashant, Commented Jan 29, 2019 at 13:41
You are approaching the problem wrong. YOU are updating the table so YOU know when and where it will be empty or not. Dont update the DOM and then check the DOM for what you did before and act accordingly. Do everything thats dependant on the DOM update in one place. — ThatBrianDude
– ThatBrianDude, Commented Jan 29, 2019 at 13:43

TeaNyan · Accepted Answer · 2019-01-29 13:45:43Z

7

If you want to check if your table is empty, you need to check if the number of rows is 0.

if ($('#Table1 tr').length == 0) {
    //...do something here
}

answered Jan 29, 2019 at 13:45

TeaNyan

5,0895 gold badges19 silver badges32 bronze badges

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

2 Comments

treyBake Over a year ago

why this works - it isn't vanilla JavaScript. jQuery isn't a solution to a JavaScript problem.

TeaNyan Over a year ago

@treyBake It is prefered to read the question thoroughly before adding comments. OP asked this: How can I check that the table is empty using javascript or jquery?.

Mr. Polywhirl · Accepted Answer · 2019-01-29 13:44:58Z

2

You can count the rows in the table body. Set your table up accordingly.

console.log(document.querySelectorAll('#Table1 tbody tr').length); // 0

document.querySelector('#Table1 tbody').appendChild(document.createElement('TR'));

console.log(document.querySelectorAll('#Table1 tbody tr').length); // 1

<table style="float: left;text-align: center;" id="Table1">
  <thead>
    <th style="width: 11%;">Item Id</th>
    <th style="width: 44%;">Item Name</th>
    <th style="width: 11%;">Quantity</th>
    <th style="width: 18%;">Trade Price</th>
    <th style="width: 16%;">Price</th>
    <th style="width: 7%;" id="non-printable">Delete</th>
  </thead>
  <tbody>
  </tbody>
</table>

answered Jan 29, 2019 at 13:44

Mr. Polywhirl

49.1k12 gold badges96 silver badges147 bronze badges

Comments

Eric Svitok · Accepted Answer · 2019-01-29 13:43:28Z

0

You can use the rows and length properties of the table to determine the amount of rows there are.

var rows = $('#Table1').rows.length;

answered Jan 29, 2019 at 13:43

Eric Svitok

8426 silver badges12 bronze badges

Comments

Nick Parsons · Accepted Answer · 2019-01-29 13:48:51Z

You know a table is empty if it only contains one row (as a row is dynamically added around your table headers). So you can try and select all the rows within your table and check the length of the collection returned. If the length is less than or equal to 1 then you know that the table is empty. Otherwise, if it is greater then you know that it has rows within the table.

See example below:

const isEmpty = document.querySelectorAll("#Table1 tr").length <= 1;
console.log(isEmpty);

<table style="float: left;text-align: center;" id="Table1">
  <th style="width: 11%;">Item Id</th>
  <th style="width: 44%;">Item Name</th>
  <th style="width: 11%;">Quantity</th>
  <th style="width: 18%;">Trade Price</th>
  <th style="width: 16%;">Price</th>
  <th style="width: 7%;" id="non-printable">Delete</th>
</table>

Collectives™ on Stack Overflow

check if my html table is empty using javascript

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related