Breaking News: Grepper is joining You.com. Read the official announcement!

how to generate a table with javascript

Add Answer

Homemadesteam58 answered on January 31, 2022 Popularity 9/10 Helpfulness 3/10

answer how to generate a table with javascript

related create html table with javascript

related create table in javascript

how to generate a table with javascript

Comment

-2

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        table{
            border-collapse: collapse;
            border-spacing: 0;
        }
        th, td{
            padding: 10px 20px;
            border: 1px solid #000;
        }
    </style>

</head>
<body id="body">

    <script src="script.js"></script>  
</body>
</html>


//script.js
let table = document.createElement('table');
let thead = document.createElement('thead');
let tbody = document.createElement('tbody');

table.appendChild(thead);
table.appendChild(tbody);

// Adding the entire table to the body tag
document.getElementById('body').appendChild(table);

// Creating and adding data to first row of the table
let row_1 = document.createElement('tr');
let heading_1 = document.createElement('th');
heading_1.innerHTML = "Sr. No.";
let heading_2 = document.createElement('th');
heading_2.innerHTML = "Name";
let heading_3 = document.createElement('th');
heading_3.innerHTML = "Company";

row_1.appendChild(heading_1);
row_1.appendChild(heading_2);
row_1.appendChild(heading_3);
thead.appendChild(row_1);


// Creating and adding data to second row of the table
let row_2 = document.createElement('tr');
let row_2_data_1 = document.createElement('td');
row_2_data_1.innerHTML = "1.";
let row_2_data_2 = document.createElement('td');
row_2_data_2.innerHTML = "James Clerk";
let row_2_data_3 = document.createElement('td');
row_2_data_3.innerHTML = "Netflix";

row_2.appendChild(row_2_data_1);
row_2.appendChild(row_2_data_2);
row_2.appendChild(row_2_data_3);
tbody.appendChild(row_2);


// Creating and adding data to third row of the table
let row_3 = document.createElement('tr');
let row_3_data_1 = document.createElement('td');
row_3_data_1.innerHTML = "2.";
let row_3_data_2 = document.createElement('td');
row_3_data_2.innerHTML = "Adam White";
let row_3_data_3 = document.createElement('td');
row_3_data_3.innerHTML = "Microsoft";

row_3.appendChild(row_3_data_1);
row_3.appendChild(row_3_data_2);
row_3.appendChild(row_3_data_3);
tbody.appendChild(row_3);

Popularity 9/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: generate javascript

Link to this answer
Share Copy Link

Contributed on Jan 31 2022

Homemadesteam58

0 Answers Avg Quality 2/10

Closely Related Answers

create html table with javascript

Comment

let table = document.createElement('table');
let thead = document.createElement('thead');
let tbody = document.createElement('tbody');

table.appendChild(thead);
table.appendChild(tbody);

// Adding the entire table to the body tag
document.getElementById('body').appendChild(table);

// Creating and adding data to first row of the table
let row_1 = document.createElement('tr');
let heading_1 = document.createElement('th');
heading_1.innerHTML = "Sr. No.";
let heading_2 = document.createElement('th');
heading_2.innerHTML = "Name";
let heading_3 = document.createElement('th');
heading_3.innerHTML = "Company";

row_1.appendChild(heading_1);
row_1.appendChild(heading_2);
row_1.appendChild(heading_3);
thead.appendChild(row_1);


// Creating and adding data to second row of the table
let row_2 = document.createElement('tr');
let row_2_data_1 = document.createElement('td');
row_2_data_1.innerHTML = "1.";
let row_2_data_2 = document.createElement('td');
row_2_data_2.innerHTML = "James Clerk";
let row_2_data_3 = document.createElement('td');
row_2_data_3.innerHTML = "Netflix";

row_2.appendChild(row_2_data_1);
row_2.appendChild(row_2_data_2);
row_2.appendChild(row_2_data_3);
tbody.appendChild(row_2);

Popularity 10/10 Helpfulness 7/10 Language javascript

Source: www.delftstack.com

Tags: html-table h

Link to this answer
Share Copy Link

Contributed on Aug 26 2022

Andreas Auer

0 Answers Avg Quality 2/10

create table in javascript

Comment

// Get a reference to the container element where the table will be created
var container = document.getElementById("table-container");

// Create the table element
var table = document.createElement("table");

// Create table rows and cells
for (var i = 0; i < 5; i++) {
  var row = document.createElement("tr");

  for (var j = 0; j < 3; j++) {
    var cell = document.createElement("td");
    var text = document.createTextNode(`Row ${i + 1}, Cell ${j + 1}`);
    cell.appendChild(text);
    row.appendChild(cell);
  }

  table.appendChild(row);
}

// Append the table to the container
container.appendChild(table);

Popularity 8/10 Helpfulness 3/10 Language javascript

Source: Grepper

Link to this answer
Share Copy Link

Contributed on Sep 12 2023

YOU.com

0 Answers Avg Quality 2/10

how to generate a table with javascript

Contents

More Related Answers

how to generate a table with javascript

Closely Related Answers

create html table with javascript

create table in javascript

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.