JSFiddle - React, Tailwind, and code Playground

by darthghandi

HTML

<script src="http://datatables.net/download/build/jquery.dataTables.min.js"></script>
<script src="http://www.appelsiini.net/download/jquery.jeditable.mini.js"></script>
<html>
    <div>
        <h2 style="text-align:center">Welcome!</h2>
        <table id="the-table"></table>
    </div>
</html>

CSS

.row-selected {
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#A6000D), to(#650207));
    background: -moz-linear-gradient(#A6000D, #650207);
    background: linear-gradient(#A6000D, #650207);
}

.short-button {
    border: 0;
    background-color: #a6000d;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#A6000D), to(#650207));
    background: -webkit-linear-gradient(top, #A6000D, #650207);
    background: -moz-linear-gradient(top, #A6000D, #650207);
    background: -ms-linear-gradient(top, #A6000D, #650207);
    background: linear-gradient(top, #A6000D, #650207);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#A6000D', endColorstr='#650207');
    border-radius: 14px;
    color: white;
    text-shadow: 0 1px 1px black;
    padding: 1px 15px;
    margin: .01in;
    display: inline-block;
    font-size: .9em;
}

.add {
    display: inline-block;
    padding-left: 9px;
    padding-right: 9px;
}

.edit {
    display: inline-block;
    padding-left: 5px;
}

#the-table_filter {
    display: inline-block;
    padding-right: 9px;
}

body {
    font-family: "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
    font-weight: 300;
    margin: 0px;
    padding: 0px;
    border:0; 
    background: black; /*aaaaahhhhh black, good for the eyes!*/
    height:100%;
    max-height:100%; 
    overflow:hidden; 
    color: white
}

table {
    border: 1px solid #A6000D;
}

JavaScript

var counter = 311;
//select the row
function onRowSelected(event) {
    if ($(this).hasClass('row-selected')) {
        $(this).removeClass('row-selected');
    }
    else {
        $('tr.row-selected').removeClass('row-selected');
        $(this).addClass('row-selected');
    }
}

//trigger the edit event when the edit button is clicked
function onTableCellEdit(event)  {
    $("#edit").trigger("edit");
}

//adding a row
function onAddRelease(event) {
    $("#the-table").dataTable().fnAddData([counter, "New Row", new Date(), 'no']);
    counter++;
}

//initialize the datatable and add the "add" and "edit" button
var tableData = [["2034958203", "Fred", "Yesterday", "yes"], ["203495820311", "Joe", "Today", "no"]];
var theTable = $("#the-table").dataTable({
    aaData: tableData,
    aoColumns: [
        {
        "sTitle": "id",
        "bVisible": false},
    {
        "sTitle": "Name",
        "sWidth": "65%"},
    {
        "sTitle": "Created",
        "bVisible": false},
    {
        "sTitle": "Default",
        "sWidth": "35%"}],
    bAutoWidth: false,
    bDeferRender: true,
    bPaginate: false,
    sDom: 'lf<"add"><"edit">rtSip',
    sScrollY: "" + $("#content").height() - (7 * $("#footer").height()) - $("#content-bottom-pad").height() + "px"
});
$("div.add").html('<a href="javascript:;" class="short-button" id="add">Add</a>');
$("div.edit").html('<a href="javascript:;" class="short-button" id="edit">Edit</a>');

//add the on click to select the row
$("table").on("click", 'tr', {
    page: this
}, onRowSelected);

//adding a new row
$("#add").on("click", onAddRelease);

//trying to edit the selected row
$("#edit").on("click", onTableCellEdit);
$("#the-table").on("edit", "td", function() {
    $(this).editable(function(value, settings) {
        var row = $("tr.row-selected")[0];
        $.ajax({
            url: '/echo/json/',
            data: {
                json: JSON.encode({row: [row[0], value, row[2], row[3]]})
            }
        });
       ...