JSFiddle - React, Tailwind, and code Playground

by Neo Aptt

HTML

<table id='records_table'></table>

JavaScript

var a = [{
    "id": "1",
    "rank": "9",
    "content": "Alon",
    "UID": "5",
    "P1": "1",
    "P2": "0",
    "P3": "0",
    "P4": "1",
    "P5": "0"
}, {
    "id": "2",
    "rank": "6",
    "content": "Tala",
    "UID": "6",
    "P1": "1",
    "P2": "0",
    "P3": "0",
    "P4": "1",
    "P5": "0"
}, {
    "id": "3",
    "rank": "9",
    "content": "Alon",
    "UID": "5",
    "P1": "1",
    "P2": "0",
    "P3": "0",
    "P4": "1",
    "P5": "0"
}, {
    "id": "4",
    "rank": "6",
    "content": "Tala",
    "UID": "6",
    "P1": "1",
    "P2": "0",
    "P3": "0",
    "P4": "1",
    "P5": "0"
}, {
    "id": "5",
    "rank": "6",
    "content": "Tala",
    "UID": "6",
    "P1": "1",
    "P2": "0",
    "P3": "0",
    "P4": "1",
    "P5": "0"
}];
var trHTML = '';
$.each(a, function (i, item) {
    trHTML += '<tr><td>' 
    + item.rank 
    + '</td><td>' 
    + item.content 
    + '</td><td>' 
    + item.UID 
    + '</td><td>' 
    + '<input type="checkbox" value="P1" '+check(item.P1)+'></td><td>' 
    + '<input type="checkbox" value="P2" '+check(item.P2)+'></td><td>' 
    + '<input type="checkbox" value="P3" '+check(item.P3)+'></td><td>' 
    + '<input type="checkbox" value="P4" '+check(item.P4)+'></td><td>' 
    + '<input type="checkbox" value="P5" '+check(item.P5)+'></td></tr>';
});
$('#records_table').append(trHTML);

function check(value){
    if(value == 1){
        return 'checked';
    }
}

$('tr:odd').css("background", "yellow");