JSFiddle - React, Tailwind, and code Playground

by rlemon

HTML

<table id="tblListings" cellpadding="0" cellspacing="0">
    <thead>
        <tr>
            <th>Part Code (P.C)</th>
            <th>Description</th>
            <th>Supplier</th>
            <th>Supplier P.C</th>
            <th>LOC</th>
            <th>QTY</th>
            <th>Unit Cost (CND)</th>
        </tr>
    </thead>
    <tbody><tr data-id="1"><td data-key="part_code" style="padding-top: 6px; padding-right: 6px; padding-bottom: 6px; padding-left: 6px; ">PC1</td><td data-key="part_description"><span>google that shit up</span></td><td data-key="part_supplier_id"><span>0</span></td><td data-key="supplier_part_code"><span>SC1</span></td><td data-key="loc"><span>A</span></td><td data-key="qty"><span>10</span></td><td data-key="unit_cost"><span>1.99</span></td></tr><tr data-id="2"><td data-key="part_code" style="padding-top: 6px; padding-right: 6px; padding-bottom: 6px; padding-left: 6px; ">PC2</td><td data-key="part_description"><span>asdas da sda sd d</span></td><td data-key="part_supplier_id"><span>1</span></td><td data-key="supplier_part_code"><span>asdf</span></td><td data-key="loc"><span>Z</span></td><td data-key="qty"><span>99</span></td><td data-key="unit_cost"><span>12.99</span></td></tr><tr data-id="3"><td data-key="part_code" style="padding-top: 6px; padding-right: 6px; padding-bottom: 6px; padding-left: 6px; ">001</td><td data-key="part_description"><span>kjh lkj hlkj h</span></td><td data-key="part_supplier_id"><span>1</span></td><td data-key="supplier_part_code"><span>0045632ml2k3asdad</span></td><td data-key="loc"><span>F</span></td><td data-key="qty"><span>999</span></td><td data-key="unit_cost"><span>0</span></td></tr></tbody>
</table>

CSS

@import url(http://fonts.googleapis.com/css?family=Ubuntu:400,500,700);
body {
    padding: 10px;
}
* {
    font-family: 'Ubuntu', sans-serif;
}
#tblListings {
    width: 100%;
}
#tblListings thead {
 background-color: #dedede;   
}
#tblListings td, #tblListings th {
 padding: 6px;   
 border: 1px solid #adadad;
 border-bottom: none; 
}
#tblListings tbody tr:nth-child(even) td {
 background-color: #efefef; 
}
#tblListings tbody tr:last-child td {
 border-bottom: 1px solid #adadad; 
}
#tblListings td input {
    width: 100%;
    border: none;
    outline: none;
    background-color: #ff0;
}

JavaScript

$("#tblListings tbody").on("click", "td", function(event) {
    if (event.target.tagName === "INPUT") return;
    var cell = $(this);
    var input = $("<input>", {
        type: "text",
        value: cell.text(),
        maxlength: 128
    });
    cell.empty().css("padding", 0).append(input);
    input.focus();
    input.on("blur", function() {
        cell.css("padding", 6).text(this.value);
    });
});