JSFiddle - React, Tailwind, and code Playground

by Chris Kaminski

HTML

<script src="https://raw.github.com/douglascrockford/JSON-js/master/json2.js"></script>
<div> 
    	<input type="text" class="rounded default-value" name="TableName" id="TableName" value="Table Name" />
</div>

<div>
<table class="table table-bordered">
    <thead class="mbhead">
        <tr class="mbrow">
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>
<button id="saveButton">save</button>
<button id="addCol">Column</button>
<button id="addRow">Row</button>
    
</div

CSS

div { 
    margin: 3px; 
}

th, tr {
    height:25px;
    width:80px;
    background:#b8b8b8;
}
td, tr { 
    height:25px;
    width:80px;
    background:#9cd7ff;
}    

input.rounded {
  border: 1px solid #ccc;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 2px 2px 3px #666;
  -webkit-box-shadow: 2px 2px 3px #666;
  box-shadow: 2px 2px 3px #666;
  font-size: 18px;
  padding: 4px 7px;
  outline: 0;
  -webkit-appearance: none;  
}


input.default-value { 
      margin: 0px 3px 0px 3px;
}
input.rounded:focus { 
  border-color: #339933;

}

JavaScript

//$("table.table tr th").bind("click", headerClick);
$("table.table tr th").bind("click dblclick", dataClick);
    //$("table.table tr th").addClass("small-rounded");
$("table.table tr td").bind("click", dataClick); // live will continue to bind to new DOM elements when added
$("#saveButton").bind("click",saveButton);
$("#addRow").bind("click",addRow);
$("#addCol").bind("click",addCol);


function headerDoubleClick(e) { 
    console.log(e);
    window.alert("Header doubleclick");
} 
function addCol(e) { 
    console.log(e);

    $('table.table thead').find('tr').each(function () {
        var newhead = $('<th></th>');
        $(this).append(newhead);
        newhead.bind('click dblclick', dataClick);
    });

    $('table.table tbody').find('tr').each(function () {
        var newcell = $('<td></td>');
        $(this).append(newcell);
        newcell.bind('click', dataClick);
    });

}

function headerClick(e) {
    console.log(e);
    $(e.currentTarget).css({
        color:"red"
    });
}

function dataClick(e) {
    console.log(e);
    if (e.currentTarget.innerHTML != "") return;
    console.log('dataClick innerHTML != ""'); 
    if(e.currentTarget.contentEditable != null){
        console.log('dataClick connectEditable != null'); 
        $(e.currentTarget).attr("contentEditable",true);
    }
    else{
        console.log('dataClick connectEditable == null'); 
        $(e.currentTarget).append("<input type='text'>");
    }    
}

function saveButton(){
    JSONstr = ''; 
    headers = []; 
    $("table.table thead tr th").each(function(idx, tr) { 
        headers[idx] = tr.innerHTML; 
        console.log('TH: ' + tr.innerHTML);
    });
    colNames = { 'cols': headers };
    console.log('DATA: ' + JSON.stringify(colNames, null,2) ) ;
   
    rows = [ ]; 
    
    $("table.table tbody tr").each( function(indexRow, tr) {
        row = [ ]; 
       
        $(this).find("td").each(function(indexCell, td){
            headerName = headers[indexCell]; 
           ...