DEV Community

loading...
Cover image for How to Create the Updatable Table with Vanilla JS

How to Create the Updatable Table with Vanilla JS

Kaho Shibuya
I'm currently a student learning web development. Focusing on JavaScript now.
・3 min read

This is how I created the updatable table with Vanilla JavaScript. I also share the issue that I encountered.

What I created

I created the "Menu Management System" app, which enables a cafe or a restaurant to easily update its menu. (It could be great if the print function is added)
Demo CaptureYou can see the demo movie and the code.

How It Works

First, set an empty table in HTML and create the default array in JavaScript.

let food = [
    {
        name: 'French Toast',
        price: 7.99,
        popularity: '★★',
    },
    {
        name: 'Hawaiian Pancake',
        price: 9.99,
        popularity: '★★★',
    },
    {
        name: 'Omelet',
        price: 5.99,
        popularity: '★★',
    }
];
Enter fullscreen mode Exit fullscreen mode

Then, when the page is loaded the following function executes to show the default version of the table.

const tBody = document.querySelector('tbody');

function updateTable() {
    const tableData = food
        .map((item) => {
            return `
    <tr>
    <td>${item.name}</td>
    <td>$${item.price}</td>
    <td>${item.popularity}</td>
    <td><i class="fas fa-times-circle"></i></td>
    </tr>
    `;
        })
        .join('');

  tBody.innerHTML = tableData;
}
Enter fullscreen mode Exit fullscreen mode

When a new item is added by clicking the "Add Item" button, push the new item to food array. Then, update the whole table. The function is below.

const addBtn = document.querySelector('.btn-outline-primary');

function addItem() {
    const name = document.querySelector('#name');
    const price = document.querySelector('#price');
    const popularity = document.querySelector('#popularity');
    const obj = {};
  if(name.value !== '' && price.value !== '' && popularity.value !== ''){
    obj.name = name.value;
    obj.price = price.value;
    obj.popularity = popularity.value;
    food.push(obj);
    updateTable(); //update the table once again here.
    name.value = '';
    price.value = '';
    popularity.value = 'Select Popularity';
  }
}

addBtn.addEventListener('click', addItem);
Enter fullscreen mode Exit fullscreen mode

To delete all items, I first came up with creating the loop function that goes through(loops over) all <tr> nested in <tBody> and remove all.

...and this is where I got stuck!

Issue!!!

For the "Clear All" button, I simply created the following loop function.

const tBody = document.querySelector('tbody');
const tableRows = tBody.getElementsByTagName('tr');

function clearAllItem() {
  for(let i = 0; i < tableRows.length; i++){
    tableRows[i].remove();
  }
  food = [];
}
Enter fullscreen mode Exit fullscreen mode

However, it deletes some of the rows; not all of them.
It looked like this.
Error TableThis has to do with the way for-loop iteration behaves.

With the code above, the function clearAllItem runs the following ways.

1. First-time run

  • Table at the moment
CHOICE PRICE POPULARITY
French Toast $7.99 ★★
Hawaiian Pancake $9.99 ★★★
Omelet $5.55 ★★
  • i = 0
  • tableRows.length = 3
  • i is less than tableRows.length

The function executes tableRows[0].remove();, then "French Toast" row and its data is gone.

2. Second-time run

  • Table at the moment
CHOICE PRICE POPULARITY
Hawaiian Pancake $9.99 ★★★
Omelet $5.55 ★★
  • i = 1
  • tableRows.length = 2
  • i is less than tableRows.length

The function executes tableRows[1].remove();, then "Omelet" row and its data is gone.

3. Third-time run

  • Table at the moment
CHOICE PRICE POPULARITY
Hawaiian Pancake $9.99 ★★★
  • i = 3
  • tableRows.length = 1
  • i is greater than tableRows.length

The function won't execute any and the loop stops here.

The "Hawaiian Pancake" row still remains.

Solution

To avoid the problem, I set the for-loop backward.

function clearAllItem() {
  for(let i = tableRows.length - 1; i >= 0; i--){
    tableRows[i].remove();
  }
  food = [];
}
Enter fullscreen mode Exit fullscreen mode

Let's break this down.

1. First-time run

  • Table at the moment
CHOICE PRICE POPULARITY
French Toast $7.99 ★★
Hawaiian Pancake $9.99 ★★★
Omelet $5.55 ★★
  • tableRows.length = 3
  • i = tableRows.length - 1 = 2
  • i is greater than 0

The function executes tableRows[2].remove();, then "Omelet" row and its data is gone.

2. Second-time run

  • Table at the moment
CHOICE PRICE POPULARITY
French Toast $7.99 ★★
Hawaiian Pancake $9.99 ★★★
  • tableRows.length = 2
  • i = tableRows.length - 1 = 1
  • i is greater than 0

The function executes tableRows[1].remove();, then "Hawaiian Pancake" row and its data is gone.

2. Third-time run

  • Table at the moment
CHOICE PRICE POPULARITY
French Toast $7.99 ★★
  • tableRows.length = 1
  • i = tableRows.length - 1 = 0
  • i is equal to 0

The function executes tableRows[0].remove();, then "French Toast" row and its data is gone.

Now, all items are gone🎉🎉

This would be a good solution when dealing with elements of a live HTML collection.


This one is a very simple app, but storing data to local storage or database makes this app more functioning for use in practice!

Discussion (0)

Forem Open with the Forem app