.


Divya


How to Add table row in jQuery


<!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>

Run it yourself



.