JSFiddle - React, Tailwind, and code Playground

by carsont

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<html>
    
    <head>
        <link rel="stylesheet" type="text/css" href="ya.css">
    </head>
    
    <body>
        <div class="yard-tracks"></div>
        <script src="jquery-1.9.1.js"></script>
        <script src="ya.js"></script>
    </body>

</html>

CSS

.track-row {
    font-family:"Calibri", "Lucida Grande", Sans-Serif;
    border-collapse: collapse;
    padding: 2px 2px 2px 2px;
}
.cell {
    display: inline-block;
    background-color: purple;
    margin: 2px 2px 2px 2px;
    height: 10px;
}
. track {
}
.outer-container {
}
td {
    padding: 8px;
    background-color: red;
}
.yard-tracks {
    font-size: 11px;
    /* width:98%; */
    /* border-top: 1px solid #FFF; */
    /* border-left: 1px solid #FFF; */
    /* border-right: 1px solid #FFF; */
    /* border-bottom: 1px solid #FFF; */
    /* font-family: "Calibri", "Lucida Grande", Sans-Serif; */
    /* align: "center"; */
    /* padding: 2px 2px 0px 2px; */
}
/* .yard-tracks th { */

/*     font-size: 11px; */

/*     border-bottom: 1px solid #FFF; */

/*     font-family: "Calibri", "Lucida Grande", Sans-Serif; */

/*     border-collapse: collapse; */

/*     padding: 2px 2px 0px 2px; */

/* } */

/* .yard-tracks td { */

/*     /\* width:.60%; *\/ */

/*     /\* height:.75%; *\/ */

/*     font-size: 11px; */

/*     font-family: "Calibri", "Lucida Grande", Sans-Serif; */

/*     align: "center"; */

/*     padding: 2px 2px 0px 2px; */

/* } */

JavaScript

var columnTemplate = '<td class="tooltipA" title="{0}" backgroundColor="{1}"></td>';

var yard = [{
    "col17": "63.9",
    "col16": "E",
    "col15": "LAWLER",
    "col14": "00317",
    "col13": "CPRS",
    "col12": "8306507385",
    "col11": null,
    "col8": "ARIL",
    "col9": "584996595",
    "col6": "1",
    "col10": null,
    "col7": "2014-12-07 11:05:39",
    "col4": "LAWLER",
    "col5": "M22",
    "col2": "0000630038",
    "col3": "00317",
    "col1": "SOXX"
}, {
    "col17": "70",
    "col16": "E",
    "col15": "LAWLER",
    "col14": "00317",
    "col13": "CPRS",
    "col12": "8306507384",
    "col11": null,
    "col8": "ARIL",
    "col9": "584819993",
    "col6": "2",
    "col10": null,
    "col7": "2014-12-07 11:05:39",
    "col4": "LAWLER",
    "col5": "M22",
    "col2": "0000639065",
    "col3": "00317",
    "col1": "TILX"
}, {
    "col17": "63.9",
    "col16": "E",
    "col15": "LAWLER",
    "col14": "00317",
    "col13": "CPRS",
    "col12": "8306507383",
    "col11": null,
    "col8": "ARIL",
    "col9": "585270402",
    "col6": "3",
    "col10": null,
    "col7": "2014-12-07 11:05:39",
    "col4": "LAWLER",
    "col5": "M22",
    "col2": "0000630026",
    "col3": "00317",
    "col1": "SOXX"
}, {
    "col17": "70",
    "col16": "E",
    "col15": "LAWLER",
    "col14": "00317",
    "col13": "CPRS",
    "col12": "8306507382",
    "col11": null,
    "col8": "ARIL",
    "col9": "585270400",
    "col6": "4",
    "col10": null,
    "col7": "2014-12-07 11:05:39",
    "col4": "LAWLER",
    "col5": "M22",
    "col2": "0000700765",
    "col3": "00317",
    "col1": "CITX"
}, {
    "col17": "70",
    "col16": "E",
    "col15": "LAWLER",
    "col14": "00317",
    "col13": "CPRS",
    "col12": "8306507381",
    "col11": null,
    "col8": "ARIL",
    "col9": "585270403",
    "col6": "5",
    "col10": null,
    "col7": "2014-12-07 11:05:39",
    "col4": "LAWLER",
    "col5": "M22",
    "col2": "0000640347",
    "col3": "00317",
    "col1": "TILX"
}, {
   ...