Dynamic table in javascript - WebTutorialStack

Everyone knows how to create a table with html. But if i say that you have to create a table that takes number of rows and number of columns as user input then it is not possible using only html. Then in that case we can create a dynamic table in javascript or using javascript. javascript is a very popular language that is used mostly for web development. For creating dynamic table here i am using three files one is html file that contains the simple form of two inputs rows and column, second file is css file that is used for designing and third file which is javascript file for logic to implement the dynamic table. Instead of this I am also using bootstrap for styling the table. so now lets start building the dynamic table in javascript.

index.html

In index.html firstly I have used the link of bootstrap and added the link for style.css and in the bottom i have added the script.js under the body section. Now in the main body I have simply created the form that contains the two inputs one is for rows and other one is for columns and there is button to create the columns and rows. After clicking on create you can fill any thing inside the columns then there is button called populate when you click on that it will populate the table with the filled header columns.

<!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>Dynamic Table using javascript</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <form action="/" name="form" onsubmit="return validateForm()">
    <label for="rows">Enter the number of rows :</label>
    <input type="number" id="rows" name="rows" min="0"><p id="rowcheck"></p><br>;

    <label for="cols">Enter the number of cols :</label>
    <input type="number" id="cols" name="cols" min="0"><p id="check"></p><br>
    
    
    <button type="submit"  onclick="display()" id="button">create</button><br><br>
    </form>
    <p id="demo"></p> 


    <button id="btn">Populate</button><br><br>

    <table border="1" id="table" class="table table-dark">
     
    </table>
    <script src="script.js"></script>
</body>
</html>

style.css

In style.css i have added some style to make give the classic look to inputs and buttons.

#check , #rowcheck{
    color:red;
    margin-left: 190px;
}
#btn{
    display: none;
}
.error{
    border: 1px solid red;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}

script.js

So here is the code that creates dynamic table in javascript.

 let input = document.querySelector('input[type="number"]');
 input.style.webkitAppearance = 'none';


function validateForm(){
    let x=document.forms["form"]["rows"].value;
    let y=document.forms["form"]["cols"].value;
    if(x<1){
        alert("Rows must be filled with Positive natural number ");
    }
    return false;
}
function display(){

        
        const column=document.getElementById("cols").value; 
        const row=document.getElementById("rows").value;
        let txt;
        if(row<1){
            document.getElementById("rowcheck").innerHTML="Please fill Positive Natural number";
            display();
        }
        if(column<1 || column>10){
        //   txt="Input not valid";
        document.getElementById("check").innerHTML="Please fill between 1 1o 10";
        display();
    }
    else{
            document.getElementById("check").innerHTML="";
            document.getElementById("rowcheck").innerHTML="";
            let text="";
            for(let i=0;i<column;i++){
                text=text+`<input type="text" class="inp">&nbsp;&nbsp;`;
            }
            
            document.getElementById("demo").innerHTML=text;
            
            document.getElementById("btn").style.display="block";
              document.getElementById("rows").disabled=true; 
              document.getElementById("cols").disabled=true; 
              document.getElementById("button").disabled=true; 
            document.getElementById("btn").addEventListener("click",populate);
       }
       
          }

function populate()
      {
        const column=document.getElementById("cols").value;
        const row=document.getElementById("rows").value;
        const table=document.getElementById("table");
        let elem=document.getElementsByClassName("inp");
        for(let i=0;i<elem.length;i++){
           if(elem[i].value==""){
              elem[i].classList.add("error");
              return;
            }
            else{
                elem[i].classList.remove("error");
            }
        }
        let headerRow = document.createElement("tr");
        for(let i=0;i<elem.length;i++){
            let th =document.createElement("th");
            let text=document.createTextNode(elem[i].value);
            th.appendChild(text);
            headerRow.appendChild(th);
        }
        table.appendChild(headerRow);
        for(let j=0;j<row;j++){
            var tr=document.createElement("tr");
            
            for(let i=0;i<column;i++){
                var td=document.createElement("td");
                let text=document.createTextNode("data");
                td.appendChild(text);
                tr.appendChild(td);
            }
            table.appendChild(tr);
        }
        document.getElementById("btn").disabled=true; 

    }

Above is the full code for making dynamic table in javascript. Also if you want the source code in the form of file then you can download the file from here.

dynamic table in javascript Download