S2230467 - Visio Scenario

Excel Table to HTML

by dixalex

HTML

<table class='dcmTable'>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td>Microsoft
        <br/>Office</td>
      <td>Visio
        <br/>“Pro”</td>
      <td>Lucid
        <br/>Chart</td>
      <td>ARIS</td>
      <td>None of
        <br/>these options</td>
    </tr>
    <tr>
      <td>Basic Diagrams</td>
      <td>Create and edit basic diagrams &amp; charts</td>
      <td>√</td>
      <td>√</td>
      <td>√</td>
      <td>Process models only</td>
      <td>I would not purchase any of these and either:</td>
    </tr>
    <tr>
      <td>Professional Diagramming</td>
      <td>Create and edit professional diagrams using a PC/Mac diagramming solution</td>
      <td></td>
      <td>√</td>
      <td>Via Chrome App</td>
      <td>Process models only</td>
      <td>Stick with my current software, or</td>
    </tr>
    <tr>
      <td></td>
      <td>View and Comment on Diagrams</td>
      <td>View only</td>
      <td>View &amp; Comment</td>
      <td>View &amp; Comment</td>
      <td>Process models only</td>
      <td>Choose another option</td>
    </tr>
    <tr>
      <td></td>
      <td>Create and edit diagrams using a web browser </td>
      <td></td>
      <td></td>
      <td>√</td>
      <td>Process models only</td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td>Create and edit diagrams using native apps on tablets</td>
      <td></td>
      <td></td>
      <td></td>
      <td>Process models only</td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td>Create diagrams with data or metric overlays</td>
      <td></td>
      <td>√</td>
      <td></td>
      <td>Process models only</td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td>Collaborate on engineering &amp; product designs</td>
      <td></td>
      <td>√</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td>Database Modeling</td>
      <td></td>
      <td>Generates model from existing DB </td>
      <td></td>
     ...

CSS

table.dcmTable {
  border-collapse: collapse;
  width: 819.091px;
}

table.dcmTable tbody tr td {
  border: solid 1px #7f7f7f;
  font-size: .68em;
  font-family: arial;
  text-align: center;
  background-color: #FFF;
}

table.dcmTable tbody tr td.noBorder {
  border: none;
  background-color: ;
}

table.dcmTable tbody tr td.colZero {
  text-align: left;
  font-weight: bold;
  width: 100px;
  min-width: 100px;
  max-width: 100px;
}

table.dcmTable tbody tr td.colOne {
  text-align: left;
  font-weight: bold;
  width: 150px;
  min-width: 150px;
  max-width: 150px;
}

table.dcmTable tbody tr td.colHead {
  background-color: #000;
  color: #FFF;
  font-weight: bold;
  vertical-align: bottom;
  width: 110px;
  min-width: 110px;
  max-width: 110px;
}

.lastColumn {
  background-color: #FFF;
  vertical-align: middle;
}

table.dcmTable tbody tr td.lastRow {
  background-color: #92d050;
  text-align: center;
  font-weight: bold;
}

table.dcmTable tbody tr td.lastRowHeader {
  text-align: right;
}

table.dcmTable tbody tr td.profDiagramEven {background-color: #e2efda;}
table.dcmTable tbody tr td.opIntellEven {background-color: #ddebf7;}
table.dcmTable tbody tr td.busProcEven {background-color: #f2f2f2;}

JavaScript

$('tr:eq(0) td').addClass("colHead");
var headerTD = $('.colHead').closest('tr').find('td'),
  omitTD = $('.colHead').closest('tr').find('td:eq(0), td:eq(1)');
//--------------------------------------------------
for (var i = 0, len = headerTD.length; i < len; i++) {
  if (i >= 0) {
    omitTD.removeClass("colHead").addClass("noBorder");
  }
}

var $table = $('table.dcmTable');
$table.find('tr').find('td').each(function() {
  if ($(this).index() === 0) {
    $(this).addClass("colZero");
  }
  if ($(this).index() === 1) {
    $(this).addClass("colOne");
  }
  if ($(this).index() === $(this).siblings().length) {
    $(this).addClass("lastColumn");
  }
});
$('td.colZero:last').attr("colspan", "2");

$('td.lastColumn').not(":first").not(":eq(0)").remove();
var rowNum = parseInt($('tr').length - 1, 10);
$('td.lastColumn').not(".colHead").attr("rowspan", rowNum).addClass('lastBody');
$('td.lastBody').html('<p>I would not purchase any of these and either:</p><p>Stick with my current software, or Choose another option</p>');

for (i = 0, z = $('.colZero').length; i < z; i++) {
  var emptyCheck = $table.find('td.colZero');

  if (emptyCheck.eq(i).is(":empty")) {
    emptyCheck.eq(i).addClass("emptyCell");
  } else {
    emptyCheck.eq(i).addClass("rowHeader");
  }
}

$('td.rowHeader').eq(1).attr("rowspan", "8");
$('td.rowHeader').eq(2).attr("rowspan", "2");
$('td.rowHeader').eq(3).attr("rowspan", "4");
$('td.emptyCell').not(".noBorder").remove();
$('tr:last td').addClass("lastRow");
$('td.lastRow:eq(0)').addClass("lastRowHeader");
$('td.lastRow').removeClass("colOne");

$('tr:gt(1) td').not($('tr:gt(9) td')).not($("td.lastColumn")).not($("td.lastRow")).not($('tr:odd td')).addClass("profDiagramEven");
$('tr:gt(9) td').not($('tr:gt(11) td')).not($("td.lastColumn")).not($("td.lastRow")).not($('tr:odd td')).addClass("opIntellEven");
$('tr:gt(11) td').not($("td.lastColumn")).not($("td.lastRow")).not($('tr:odd td')).addClass("busProcEven");