how to create dynamic table using jQuery.

Create a dynamic table using jQuery. In this tutorial, I am going to show you how to generate a table dynamically. There is two input field one for the number of columns and other is for the number of rows you want to enter and a button. And when you click on the button table will be generated below.

create a dynamic table using jQuery

Connect jquery.min.js library  with your webpage

<script  src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Create jQuery script

<script >
    $(document).ready(function(){
        $("button").click(function(){
          var number_of_rows = $('#rows').val();
          var number_of_cols = $('#cols').val();
          var table_body = '<table border="1">';
          for(var i=0;i<number_of_rows;i++){
            table_body+='<tr>';

            for(var j=0;j<number_of_cols;j++){
                table_body +='<td>';
                table_body +='Table data';
                table_body +='</td>';

            }
            table_body+='</tr>';
          }

            table_body+='</table>';
           $('#tableDiv').html(table_body);
        });
    });
</script>

 

Complete application code to create dynamic table using jQuery

<!DOCTYPE html>
<html>
<head>
    <title>Dynamic Table</title>
    <script  src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <script >


        $(document).ready(function(){
            $("button").click(function(){
              var number_of_rows = $('#rows').val();
              var number_of_cols = $('#cols').val();
              var table_body = '<table border="1">';
              for(var i=0;i<number_of_rows;i++){
                table_body+='<tr>';

                for(var j=0;j<number_of_cols;j++){
                    table_body +='<td>';
                    table_body +='Table data';
                    table_body +='</td>';

                }
                table_body+='</tr>';
              }

                table_body+='</table>';
               $('#tableDiv').html(table_body);
            });
        });


    </script>
</head>
<body>

<div style="margin-top: 50px; margin-left: 250px">

    Number of Rows:<input type="text"  id="rows">

    Number of Coloumn: <input type="text" id="cols">

    <button>Create Table</button>

    <div id="tableDiv" style="margin-top: 40px">
        Table will gentare here.
    </div>
</div>

</body>
</html>

dynamic table using jQuery

jQuery tutorial with example

 

One Comment

Add a Comment

Your email address will not be published. Required fields are marked *

three × four =