In this tutorail we are going to discuss about most questioned topic in the web,
how to generate dynamic table using jquery. Here is the simple code for
adding/deleting rows and columns dynamically.
<html>
<head>
<link rel="stylesheet"
href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"
type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script>
$(function () {
$("#addrow").click(function () {
var tr = "<tr>" + "<td contenteditable='true'></td>".
repeat($("#myTable tr:eq(0) td").length) + "</tr>"
$("#myTable").append(tr);
});
$("#addcolumn").click(function () {
$("#myTable tr").append($("<td contenteditable='true'></td>"));
$(document).on('click', '.js-del-row', function () {
$('#myTable').find('tr:last').remove();
});
$(document).on('click', '.js-del-column', function () {
$('#myTable').find('td:last').remove();
});
});
});
</script>
<style type="text/css">
body{
position: absolute;
width: 600px;
height: 200px;
z-index: 15;
top: 50%;
left: 40%;
margin: -100px 0 0 -150px;
background: grey;
}
table,tr,td
{
border: 1px solid white;
border-collapse: collapse;
padding:10px;
margin-bottom:1em;
color: white;
}
#mytable{
position: absolute;
margin-left:50px;
margin-top: 25px;
}
.addtable{
color: red;
margin-left:50px;
margin-top: 25px;
}
</style>
</head>
<body>
<div class="addtable">
<a href='http://www.phpjavascript.com/' class='btn btn-danger'>Add</a>
<input id="addrow" type="button" value="Add Row">
<input id="addcolumn" type="button" value="Add Column">
<button class="js-del-row">Delete Row</button>
<button class="js-del-column">Delete Column</button>
</div>
<table id="myTable">
<thead>
<tr id="test" contenteditable="true"><td>S.No</td></tr>
</thead>
<tbody>
<tr>
<td contenteditable="true">0001</td>
</tr>
</tbody>
</table
</body>
</html>
I am astoundingly tense to get a couple of data about this article. Your blog is incredibly stunning thank you for share this information this is outstanding I like it particularly there are various things obliged vital and quality technique. I am a creator working with best article making connection it will give us the best choice of trim coalition. Thankful for giving us experience info. Read more
ReplyDelete