JSFiddle - React, Tailwind, and code Playground

by bschafer

HTML

<div id="header">
    bug id: <input id="txt_id"></input><button id="btn_go">Go</button>
<span style="float: right;"><img src="http://clanwta.com/boserver/images/refresh.png" /></span>
</div>
<div>
    <table id="layout_items">
        <thead>
            <th>id</th>
            <th>url</th>
            <th></th>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

CSS

body {
    font-family: Arial;
}

#header {
    background-color: #555;
    padding: 4px;
    color: #fff;
}

table {
    border: 1px solid #aaa;
    font-size: 0.9em;
}

table th {
    font-weight: bold;
    padding: 1px 3px;
    background-color: #aaa;
    color: #fff;
}

table td {
    border: 1px solid #aaa;
    padding: 3px;
}

JavaScript

var layout_items = [
    { id: 1, url: "/blah/test1" },
    { id: 2, url: "/blah/test2" },
    { id: 3, url: "/blah/test3" },
    { id: 4, url: "/blah/test4" },
    { id: 5, url: "/blah/test5" },
    { id: 6, url: "/blah/test6" },
    { id: 7, url: "/blah/test7" }
    
    ];

// page ready function
$(function () {
    var testtable = $("#layout_items tbody");
    
    for (var l in layout_items)
    {
        testtable.append("<tr><td>" + layout_items[l].id +  "</td><td>" + layout_items[l].url + "</td><td>" + "<a href=\"#\">go</a>" + "</td></tr>");
    }
});