JSFiddle - React, Tailwind, and code Playground

by Ristee

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<table width="170" height="270">
  <tr data-row="1">
    <td data-col="1"></td>
    <td data-col="2"></td>
    <td data-col="3"></td>
    <td data-col="4" class="select"></td>
    <td data-col="5"></td>
  </tr>
  <tr data-row="2">
    <td data-col="1"></td>
    <td data-col="2"></td>
    <td data-col="3"></td>
    <td data-col="4"></td>
    <td data-col="5" class="select"></td>
  </tr>
  <tr data-row="3">
    <td data-col="1" class="select"></td>
    <td data-col="2" class="select"></td>
    <td data-col="3"></td>
    <td data-col="4"></td>
    <td data-col="5" class="select"></td>
  </tr>
  <tr data-row="4">
    <td data-col="1"></td>
    <td data-col="2"></td>
    <td data-col="3"></td>
    <td data-col="4"></td>
    <td data-col="5" class="select"></td>
  </tr>
  <tr data-row="5">
    <td data-col="1" class="select"></td>
    <td data-col="2" class="select"></td>
    <td data-col="3"></td>
    <td data-col="4"></td>
    <td data-col="5" class="select"></td>
  </tr>
  <tr data-row="6">
    <td data-col="1"></td>
    <td data-col="2"></td>
    <td data-col="3"></td>
    <td data-col="4"></td>
    <td data-col="5" class="select"></td>
  </tr>
  <tr data-row="7">
    <td data-col="1"></td>
    <td data-col="2"></td>
    <td data-col="3"></td>
    <td data-col="4" class="select"></td>
    <td data-col="5"></td>
  </tr>
  <tr data-row="8">
    <td data-col="1"></td>
    <td data-col="2"></td>
    <td data-col="3"></td>
    <td data-col="4"></td>
    <td data-col="5"></td>
  </tr>
</table>
<textarea class="export" width="170" height="270"></textarea>
<span style="display:block;padding:20px"><input type="checkbox" class="short" />short view <br />
<button class="clean">clean</button>
</span>

CSS

td {
  background-color: #444;
}
.select {
  background-color: #ddd
}

textarea {  
  height: 270px;
  width: 170px;
  display: inline-block;
}
table {
  float: left;
}

JavaScript

var a = [];
for (var i = 1; i <= 8; i++) {
  a[i] = [];
  for (var e = 1; e <= 5; e++) a[i][e] = 'some';
}

$(document).ready(function() {
  $('table').click();
})
$('.clean').click(function() {
  $('.select').removeClass('select');
  $('table').click();
})
$('.short').click(function() {
  $('table').click();
})
$('td').click(function() {
  if ($(this).hasClass('select')) {
    $(this).removeClass('select');
  } else {
    $(this).addClass('select');
  }
});
$('table').click(function() {
  var t = $('table').first();
  var cols = t.find('tr');
  cols.each(function() {
    var rows = $(this).find('td');
    rows.each(function() {
      a[$(this).parent().data('row')][$(this).data('col')] = $(this).hasClass('select') ? 1 : 0;
    });
  });
  var c = convert();
});

function convert() {
  var h = "smile[8] = \n{\n";
  var hex = "smile[8]=\n{\n";
  for (var i = 1; i <= 8; i++) {
    var line = '';
    for (var e = 1; e <= 5; e++) {
      line += a[i][e];
    }
    h += "\tB" + line + ",\n";
    hex+="\t0x"+parseInt(line, 2).toString(16)+",\n";
  }
  h += "};";
  hex+="};";
  if ($('.short').prop('checked')) {
    h = h.split("\n").join('').split("\t").join('').split(" ").join('');
    hex = hex.split("\n").join('').split("\t").join('').split(" ").join('');
    }
  h = 'byte ' + h+'\n\n byte '+hex;
  $('.export').text(h);
}