Table Maker 2.0

A Better way to make tables: jQuery independent, using JSON

by Frank Taylor

HTML

<section>
  <output id="tablemaker">
  </output>

  <div id="editor">
    <div class="tableData controls">
      <fieldset id="addHeads">
        <legend>Table Meta</legend>
        <label for="addhead">Add Table Header<input type="checkbox" id="addHead" name="addhead" class="toggle"/></label>
        <label for="addfoot">Add Table Footer<input type="checkbox" id="addFoot" name="addFoot" class="toggle" /></label>
        <textarea id="tcaption" name="caption" placeholder="table caption"></textarea>
        <textarea id="tsummary" name="summary" placeholder="table summary"></textarea>
      </fieldset>
      <fieldset>
        <legend>Create Columns</legend>
        <button id="addCol" name="addCol" >+</button>
        <button id="remCol" name="remCol" >-</button>
        <input type="number" name="colNum" id="colNum" step="1" min="1" max="100" value="4"/>
      </fieldset>
      <fieldset>
        <legend>Create Column Groups</legend>
        <button id="addColG" name="addColG" >+</button>
        <button id="remColG" name="remColG" >-</button>
        <input type="number" name="colGNum" id="colNum" step="1" min="0" max="100" value="0"/>
      </fieldset>
      <fieldset id="addRows">
        <legend>Add row</legend>
        <button id="addRow" name="addRow" >+</button>
        <button id="remRow" name="remRow" >-</button>
        <input type="number" name="rowNum" id="rowNum" step="1" min="1" max="20" value="4" />
      </fieldset>
    </div>
    <!--/tableData-->
    <div class="tableDesign controls">
      <fieldset id="tableProps">
        <legend>Table Properties</legend>
        <label for="twidth">Table Width</label>
        <input type="range" name="twidth" id="twidth" step="10px" max="300" />
      </fieldset>
      <fieldset id="rowProps">
        <legend>Row Formatting</legend>
        <label for="rheight">Row height</label>
        <input type="range" name="rheight" id="rheight" step="5" max="100" />
        <label>Even Class
          <input...

CSS

#tablemaker {
  width: 400px;
  height: 300px;
  border: 2px solid #333;
}

#editor {
  position: fixed;
  right: 0;
  top: 0;
  border-radius: 5px;
  border: 1px solid black;
  box-shadow: -2px 2px 4px rgba(150, 150, 150, .5);
}

fieldset {
  margin: 1em 2em;
  width: 100%;
  border: 1px solid rgb(150, 150, 150);
  border: 1px solid rgba(150, 150, 150, 5);
  padding: .5em;
  border-radius: 5px;
}

.controls {
  width: 180px;
  margin: 1em 1em 1em 2em;
  float: left;
}

label {
  display: block;
}

[type="range"] {
  width: 90%;
  display: inline;
}

[type="range"]:after {
  display: inline;
  float: left;
  content: attr(data-value)'/' attr(max);
}

span.custom {
  display: none;
}

#tableHTML {
  height: 250px;
  display: none;
  border-radius: 10px;
  padding: 1em;
  font-family: monospace;
  box-shadow: 2px 4px 3px #999, -2px 4px 3px #999;
  background: #fff;
  z-index: 9999;
  position: fixed;
  right: 50%;
  top: 0;
}

.tableCode {
  height: 90%;
  width: 90%;
}

.closeCode {
  display: block;
  float: right;
  padding: .5em;
  border-radius: 50%;
  box-shadow: 1px 1px 2px rgba(100, 100, 100, .7);
  position: relative;
  top: -1.75em;
  right: -1em;
}

#tablemaker table {
  outline: 3px solid #999;
  width: 200px;
}

tr {
  outline: 1px solid #888;
  height: 20px;
  width: 100%;
  background: rgba(150, 150, 150, .8);
}

tr:nth-child(even),
.tr--even{
  background: rgba(150, 150, 150, .6);
}


tr:nth-child(odd), 
.tr--odd{
  background: rgba(150, 150, 150, .7);
}

tr[class*="nth"] {
  background: rgba(100, 150, 150, .7);
}

td {
  outline: 1px solid #555;
  background: rgba(240, 240, 240, .3);
  border: 2px solid #555;
}

td:nth-child(even) {
  background: rgba(240, 240, 240, .7);
}

td.even {
  background: rgba(240, 200, 240, .7);
}

td.odd {
  background: rgba(240, 200, 240, .7);
}

td[class*="cust"] {
  background: rgba(150, 150, 100, .7);
}










td.even {
  background: rgba(30, 80, 30, .3);
}

td.odd {
  background: rgba(30, 80, 30, .7);
}

.custom...

JavaScript

console.clear();



/*==========
#TABLEMAKER
==========*/

/*
#TODOS
1. create add table Col <col> functionality
2. create ability to designate which <col> for which colgroup
3. create a "switch in place" method for converting a td into a th
*/
var TableMaker = function(configData) {
  this.config = configData !== undefined ? configData : tmDefaultConfig;
  this.table = document.createElement('table');

  /*========== 
  #CLASSES.
  ==========*/
  /*These should be where we manipulate the elements (Add classes, properties, attributes) */
  
  this._Cell = function(type, row, text, index) {
    var cell = type === 'td' ?  row.insertCell(index) : row.insertBefore(document.createElement('th'), row.children[index]);
    
    if (text) {
      cell.innerText = text;
    }
    
    if (this.config.classes.cols.even && this.config.classes.cols.even !== '' && (row.cells.length ) %2 === 0 ) {
      cell.classList.add(this.config.classes.cols.even);
    }
    
    if (this.config.classes.cols.odd && this.config.classes.cols.odd !== '' && !((row.cells.length ) %2 === 0) ) {
      cell.classList.add(this.config.classes.cols.odd);
    }
    
    if (this.config.classes.cols.nth && this.config.classes.cols.nth !== '' && ((row.cells.length)%this.config.classes.cols.nth === 0) ) {
      cell.classList.add('nth--' + this.config.classes.cols.nth);
    }
    
    return cell;
  };
  
  this._Colgroup = function(index) {
    var colgroup = document.createElement('colgroup');
    return colgroup;
  };
  
  this._Caption = function(text) {
    var caption = this.table.caption !== null ? this.table.caption : this.table.createCaption();

    if (text) {
      caption.innerText = text;
    }
    return caption;
  };

  this._Footer = function() {
    var footer = this.table.createTFoot();
    return footer;
  };

  this._Header = function() {
    var header = this.table.createTHead();
    return header;
  };

  this._Body = function() {
    var body = this.table.createTBody();

   ...