Run ยป
<!Doctype html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <style> table, td, th { border: 1px solid white; } table { border-collapse: collapse; width: 100%; } th { text-align: left; } </style> <table id="myTable"> <tbody> <tr> <td>1</td> <td>jquery</td> <td>654 789 321</td> </tr> </tbody> </table> <script> //Compose template string String.prototype.compose = (function() { var re = /\{{(.+?)\}}/g; return function(o) { return this.replace(re, function(_, k) { return typeof o[k] != 'undefined' ? o[k] : ''; }); } }()); var tbody = $('#myTable').children('tbody'); var table = tbody.length ? tbody : $('#myTable'); var row = '<tr>' + '<td>{{id}}</td>' + '<td>{{name}}</td>' + '<td>{{phone}}</td>' + '</tr>'; $('button').click(function() { //Add row table.append(row.compose({ 'id': 3, 'name': 'Students Tutorial', 'phone': '123 456 789' })); }) </script> </body> </html>