JSFiddle - React, Tailwind, and code Playground
HTML
<button>Add row</button>
<table id="myTable">
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>654 789 321</td>
</tr>
</tbody>
</table>
JavaScript
//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': 'Lee',
'phone': '123 456 789'
}));
})