JSFiddle - React, Tailwind, and code Playground

by Jose Montero

HTML

<div id="div1">
<table id="table1">
<tr><td>ID</td><td>content</td><td>Date</td> </tr>
</table>
</div>

CSS

table{
  border: solid  1px black;
  width: 100%;
}

JavaScript

$(function(){


var data = [{ 'title': 'test', 'post_id': 130, 'content': 'abc'},
{ 'title': 'test', 'post_id': 131, 'content': 'abc'}]
var table = $('#table1')
for(var i=0; i < data.length; i++){
                            var aTitle = $('<a>', {
                                value : data[i].title,
                                text : 'Something',
                                href : '../post/view?id=' + data[i].post_id
                            });
                            var aContent = $('<a>', {
                                value : data[i].content,
                                 text : 'Something 2',
                                href : '../post/view?id=' + data[i].post_id
                            });
                            var aDateCreate = $('<a>', {
                                value : data[i].date_create,
                                 text : 'Something 3',
                                href : '../post/view?id=' + data[i].post_id
                            });
                            
                            var tr = $('<tr>');
           

                            tr.append($('<td>', {}).append(aTitle))
                            .append($('<td>').append(aContent))
                            .append($('<td>').append(aDateCreate));


                           table.append(tr);  
                        }

                     })