JSON Table Experiment

index.html

<div class="container">
  <div class="col-md-12">
      <table class="table table-striped head">
        <thead>
          <tr>
            <th>Text</th>
            <th style="text-align:right">Time</th>
          </tr>
        </thead>
      </table>
    <div class="specials">
      <table class="table table-striped specials">
        <tbody id="content-s">
        </tbody>
      </table>
    </div>
    <div class="regulars">
      <table class="table table-striped regulars">
        <tbody id="content-r">
        </tbody>
      </table>
    </div>
  </div>
</div>

json-table-experiment.markdown

JSON Table Experiment

A Pen by Yannick Spreen on CodePen.

License.

script.js

json_raw='{"time": "2016-12-30T12:43:33.393Z", "text": "1", "special": 0},\n{"time": "2016-12-30T13:12:15.543Z", "text": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js", "special": 0},\n{"time": "2016-12-30T13:12:16.540Z", "text": "https://cdnjs.cloudflare.com/ajax/libs/jquery-timeago/1.5.3/jquery.timeago.min.js", "special": 0},\n{"time": "2016-12-30T13:12:29.841Z", "text": "Content", "special": 1},\n{"time": "2016-12-30T12:43:33.393Z", "text": "1", "special": 0},\n{"time": "2016-12-30T13:12:15.543Z", "text": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js", "special": 0},\n{"time": "2016-12-30T13:12:16.540Z", "text": "https://cdnjs.cloudflare.com/ajax/libs/jquery-timeago/1.5.3/jquery.timeago.min.js", "special": 0},\n{"time": "2016-12-30T13:12:29.841Z", "text": "Content", "special": 1},\n'

function decode(text) {
  text = text.replace(/,[\s\n\r]*$/i, "");
  //console.log(text);
  text = '[' + text + ']';

  arr = JSON.parse(text);
  return arr;
}

function content(arr1, highlight) {
  var r = ''

  arr1.forEach(function (element, index) {
    r += '<tr>\n' +
      '<td>';
    if (highlight)
      r += '<mark>';
    else
      r += '<span>';
    r += element.text;
    if (highlight)
      r += '</mark>';
    else
      r += '</span>';
    r += '</td>\n' +
      '<td style="text-align:right">';
    if (highlight)
      r += '<mark>';
    else
      r += '<span>';
    r += '<time class="timeago" datetime="'+element.time+'">';
    if (highlight)
      r += '</mark>';
    else
      r += '</span>';
    r += '</td>\n' +
      '</tr>';
  });
  
  return r;
}

$(function () {
  var all = decode(json_raw),
      specials = [],
      regulars = [];
  $.each(all, function(){
    if (this.special)
      specials.push(this);
    else
      regulars.push(this);
  });
  $("#content-r").html(content(regulars));
  $("#content-s").html(content(specials, true));
  jQuery("time.timeago").timeago();
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-timeago/1.5.3/jquery.timeago.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.16/clipboard.min.js"></script>

style.css

table.head {
  border-radius: 5px 5px 0px 0px;
}
table.regulars {
  border-radius: 0px 0px 5px 5px;
}
table.regulars tbody :first-child td {
  border-top-width: 5px !important;
}
td>* {
  margin: 10px;
}
table {
  margin-bottom: 0px !important;
}
div.regulars tr {
  border-top-width: 20px;
}
div.specials {
  max-height: 25% !important;
  overflow-y: overlay;
}
div.regulars {
  max-height: 60% !important;
  overflow-y: overlay;
}

body {
  background-color: grey;
  margin: 20px;
}
table {
  background-color: white;
}
html,body,.container,.col-md-12 {
  height: 100%;
}
mark {
  background-color: #faf3d1;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />