Add Data To Table Using Onclick Function In Javascript

MUAZHAN

5 min read

·

Jun 22, 2024

54

Share

Adding Data to a Table Using the onclick Function in JavaScript

This article will guide you through adding data to a table dynamically using the onclick function in JavaScript. We'll cover the basic setup, event handling, and how to manipulate the table structure to display your data effectively.

1. Setting Up the HTML Structure

First, let's create the basic HTML structure for our table. We'll use a simple table with a header row and a placeholder row for the data we'll add.

  


  

    

      

        
Name
        
Age
        
City
      
    
    

      

        

        

        

      
    
  

  Add Data
  

In this code:

• We have a table with a <thead> for the header row and a <tbody> for the data rows.
• We have a button with the onclick attribute calling the addData() function, which we'll define in our JavaScript code.

2. The JavaScript Code (script.js)

Now, let's write the JavaScript code to handle the data addition:

function addData() {
  // Get the table body element
  let tableBody = document.querySelector('tbody');

  // Create a new row element
  let newRow = document.createElement('tr');

  // Create cells for the data
  let nameCell = document.createElement('td');
  let ageCell = document.createElement('td');
  let cityCell = document.createElement('td');

  // Get data from input fields (you'll need input fields in your HTML)
  let nameInput = document.getElementById('nameInput');
  let ageInput = document.getElementById('ageInput');
  let cityInput = document.getElementById('cityInput');

  // Populate the cells with the input values
  nameCell.textContent = nameInput.value;
  ageCell.textContent = ageInput.value;
  cityCell.textContent = cityInput.value;

  // Append cells to the row
  newRow.appendChild(nameCell);
  newRow.appendChild(ageCell);
  newRow.appendChild(cityCell);

  // Append the new row to the table body
  tableBody.appendChild(newRow);
}

In this code:

• We obtain the table body using document.querySelector('tbody').
• We create a new row element (<tr>).
• We create cells for each data point (<td>).
• We get data values from input fields (you'll need to add these to your HTML).
• We populate the cells with the input values.
• We append the cells to the newly created row.
• Finally, we append the new row to the table body.

3. Adding Input Fields

Remember to add input fields to your HTML to collect the data you want to add to the table. Here's an example:

4. Running the Code

Once you've added the input fields, save both the HTML and JavaScript files, open the HTML file in your browser, and click the "Add Data" button. You should see the data from your input fields added to the table!

Conclusion

This article provided a basic example of adding data to a table using the onclick function in JavaScript. You can further customize this code by:

• Adding validation to the input fields.
• Clearing the input fields after adding data.
• Creating an interactive interface for editing or deleting existing data.
• Using more advanced techniques for data management, like local storage or APIs.