See the Pen
Create Dynamic Table Using Javascript by satish mallick.
-------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Create Table</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="https://getbootstrap.com/docs/3.3/dist/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
</head>
<style>
*{margin:0; padding:0; box-sizing: border-box;}
body {font-family: arial;background: #8cd9de; height: 100vh;}
input[type='text']{width: 100%;padding: 5px 8px;border-radius: 3px;border: 1px solid #ccc; min-width: 200px;}
</style>
<body>
<br />
<h3 class="text-center">Create Dynamic Table</h3>
<br />
<div class="container">
<form class="form-inline text-center">
<div class="form-group">
<input type="text" onkeypress="return isNumberKey(event);" class="form-control" id="row" placeholder="Type the number of row">
</div>
<div class="form-group">
<input type="text" onkeypress="return isNumberKey(event);" class="form-control" id="column" placeholder="Type the number of column">
</div>
<button type="button" id="submit" class="btn btn-primary">Create Now</button>
</form>
</div>
<br />
<div id="container" class="container"></div>
<script>
document.getElementById('submit').onclick=function(){
var row = document.getElementById('row').value;
var column = document.getElementById('column').value;
if(row == '' || row == 'null' ){
alert('Enter row value');
}
if(column == '' || column == 'null' ){
alert('Enter column value');
}
var output = '<div class="table-responsive">'+'<table border="1" style="border-color: #ccc;" cellspacing="0" cellpadding="5" class="table">'
function createTable(row, column){
for(var i = 1; i <= row; i++){
output += '<tr>'
for(var j = 1;j <= column; j++){
output += '<td>'+'<input type="text" placeholder="Enter text" />'+'</td>'
}
output += '</tr>'
}
output += '</div>'+'</table>'
document.getElementById('container').innerHTML=output;
}
createTable(row,column);
};
//Enter Only Numeric Value
function isNumberKey(my_event){
var charCode = (my_event.which) ? my_event.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
{
alert("Enter Only Numbers");
return false;
}
return true;
}
</script>
</body>
</html>
----------------------------------------------------
Hello,
No comments:
Post a Comment