Labels

php (35) javascript (31) phpjavascript (30) jquery (23) html (20) mysql (14) database (9) codeigniter (4) json (4) bar chart (2) calendar (2) column chart (2) framework (2) google maps (2) query (2) tables (2) url (2) dropdown (1)

Friday, March 16, 2018

How to generate dynamic tables using Javascript/JQuery, CSS, HTML?

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>

Result




1 comment:

  1. 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

More Posts

FOLLOW