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




4 comments:

  1. Such a great blog is very difficult to get. I am very happy to join this Blog in today. aTube Catcher mega MecaNet

    ReplyDelete
  2. Thanks For Sharing This, Very Interesting And Helpful Support Provide By this blog. Digital Signature Certificate

    ReplyDelete
  3. Thanks for sharing such an awesome post. This is very informative and helpful, share more post.like Thank you so much for providing such useful content.Digital Signature Certificate

    ReplyDelete
  4. I highly admire your post. Thanks for sharing such wonderful information, I see your post very often and share them on all social media channels.
    Digital Signature Certificate in Delhi

    ReplyDelete

More Posts

FOLLOW