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>
jQuery tutorial with example
