JSFiddle - React, Tailwind, and code Playground

by ocanal

HTML

<div id="form">
<table class="dataTable">
<tr>
<th>Date</th>
<th>Description</th>
<th>Event Id</th>
<th>Heading</th>
</tr>
</table>
</div>

CSS

body {font-family:Arial, Helvetica, sans-serif; font-size:12px; margin:10px; padding:0;}
#form table {background-color:#e8e8e8; text-align:center; margin:0; padding:1px; border:1px solid #e1e1e1;}
#form table tr th {font-weight:bold; background-color:#CCCCCC; margin:0; padding:2px 5px;}
.oddrow {background-color:#00CCFF;}
.evenrow {background-color:#FCC;}

JavaScript

$(document).ready(function() {

  $.ajax({ 
    type: "GET",
      data: {},
    contentType: "application/json",
    url: "http://query.yahooapis.com/v1/public/yql?q="+encodeURIComponent("select * from json where url='http://107.22.160.4/ICatService/Service.svc/GetEvent/10/iphone2x'")+"&format=json&diagnostics=true",
    dataType: "jsonp",
    success: function(resp) {
           var respJSON = resp.query.results.json;
           var data = respJSON.Get_ICatelog_EventResult;
                          var tblRow = "<tr>"+
                                          "<td>"+data.Date+"</td>"+
                                          "<td>"+data.Description+"</td>"+
                                          "<td>"+data.Back_type+"</td>"+
                                          "<td>"+data.DateModified+"</td>"+
                                          "</tr>";
                          $(tblRow).appendTo(".dataTable");
                          $('table tr:odd').addClass('oddrow');
                          $('.dataTable tr:even').addClass('evenrow');
    }, 
     error: function(data){ 
          alert("error");
    } 
  });
});