S2230450

3_0_Azure_Global

by dixalex

HTML

<table cellspacing="0" border="1">
  <tbody>
    <tr>
      <td></td>
      <td>Microsoft Azure Datacenter Options</td>
      <td>Amazon Web Services (AWS) Datacenter Options</td>
      <td>Other Cloud Provider or On Premise</td>
    </tr>
    <tr>
      <td></td>
      <td>3+1 [Within Country]</td>
      <td>3+0 [Within Country]</td>
      <td>1+1 [Within Country]</td>
      <td>Global [Outside Country]&nbsp;</td>
      <td>3+0 [Within Country]</td>
      <td>Global [Outside Country]&nbsp;</td>
      <td>I would <u>not choose any of the options to the left</u> and instead would either use</td>
    </tr>
    <tr>
      <td>Data Center Regions and Availability Zones</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td># of Datacenter Regions within your country</td>
      <td>2</td>
      <td>1</td>
      <td>2</td>
      <td>0</td>
      <td>1</td>
      <td>0</td>
      <td></td>
    </tr>
    <tr>
      <td># of Availability Zones per Datacenter region</td>
      <td>One region has 2-3 zones, the other has 1 single zone</td>
      <td>3</td>
      <td>1</td>
      <td>3</td>
      <td>3</td>
      <td>3</td>
      <td></td>
    </tr>
    <tr>
      <td>Data Residency</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Data Residency for Primary data</td>
      <td>&#8226;</td>
      <td>&#8226;</td>
      <td>&#8226;</td>
      <td></td>
      <td>&#8226;</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Data Residency for catastrophic data protection </td>
      <td>&#8226;</td>
      <td></td>
      <td>&#8226;</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Disaster Recovery- Datacenter/City Level</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
     ...

CSS

.dcmTable {
  border-collapse: collapse;
  border: none;
  font-family: calibri;
  font-size: 11.5px;
  text-align: center;
  color: #365f91;
}

.dcmTable td {
  border-left: solid 1px #CCC;
  border-right: solid 1px #CCC;
  min-width: 133px;
  vertical-align: top;
}

.oddRow {
  background-color: #dbe5f1;
}

.lastRow {
  background-color: #e2efda;
  color: red;
}

.firstColumn {
  text-align: left;
  color: #365f91;
}

.headerRows {
  font-weight: bold;
}

.indentRows {
  padding-left: 12px;
}

td.blankCell {
  background-color: #FFF;
  border: none;
}

.azureData {
  background-color: #8db3e2;
  color: #FFF;
  font-weight: bold;
  font-size: 16px;
}

.azureR2 {
  background-color: #8db3e2;
  color: #FFF;
  font-weight: bold;
  font-size: 11.5px;
}

.amazonData {
  background-color: #b6dde8;
  color: #365f91;
  font-weight: bold;
  font-size: 16px;
}

.amazonR2 {
  background-color: #b6dde8;
  color: #365f91;
  font-weight: bold;
  font-size: 11.5px;
}

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

.otherHeader {
  color: #365f91;
  background-color: #FFF;
  font-weight: bold;
  font-size: 16px;
}

.lastColumn {
  background-color: #FFF;
  color: #365f91;
}

JavaScript

$('table:eq(0)').addClass("dcmTable");
$('tr:even').addClass("oddRow");
$('tr:last').addClass("lastRow");
$('table.dcmTable tr').each(function() {
  $('table.dcmTable tr').find('td:eq(0)').addClass('firstColumn');
});
var $boldRows = $('tr:eq(2) td:eq(0), tr:eq(5) td:eq(0), tr:eq(8) td:eq(0), tr:eq(10) td:eq(0), tr:eq(13) td:eq(0), tr:eq(15) td:eq(0)');
var $indentRows = $('tr:eq(3) td:eq(0), tr:eq(4) td:eq(0), tr:eq(6) td:eq(0), tr:eq(7) td:eq(0), tr:eq(9) td:eq(0), tr:eq(11) td:eq(0), tr:eq(12) td:eq(0), tr:eq(14) td:eq(0)');
console.log($boldRows);
$boldRows.addClass("headerRows");
$indentRows.addClass("indentRows");

$('tr:eq(0) td:eq(0), tr:eq(1) td:eq(0)').addClass("blankCell");
$('tr:eq(0) td:eq(1)').attr("colspan", "4").addClass("azureData");
$('tr:eq(0) td:eq(3)').addClass("otherHeader");
$('tr:eq(1) td:eq(1), tr:eq(1) td:eq(2), tr:eq(1) td:eq(3), tr:eq(1) td:eq(4)').addClass("azureR2");
$('tr:eq(0) td:eq(2)').attr("colspan", "2").addClass("amazonData");
$('tr:eq(1) td:eq(5), tr:eq(1) td:eq(6)').addClass("amazonR2");
$('tr:eq(0) td:eq(3)').addClass("otherColumn");
$('tr').each(function() {
  $(this).find('td:last').addClass("otherColumn");
});
console.log($('.otherColumn').length);
$('.otherColumn:eq(1)').attr("rowspan", "14");
$('tr').each(function() {
  $(this).not($('tr:eq(0), tr:eq(1), tr:eq(14), tr:eq(15)')).find('td:last').addClass("newLast");
});

$('.newLast').remove();
$('.otherColumn:eq(0), .otherColumn:eq(2), .otherColumn:eq(3)').addClass("lastColumn").removeClass("otherColumn");

$('tr').each(function() {
  $(this).find('td:eq(1)').not($('.azureData')).addClass("azure_3_1");
  $(this).find('td:eq(2)').not($('.azureData')).addClass("azure_3_0");
  $(this).find('td:eq(3)').not($('.azureData')).addClass("azure_1_1");
  $(this).find('td:eq(4)').not($('.azureData')).addClass("azureGlobal");
  $(this).find('td:eq(5)').not($('.amazonData')).addClass("amazon_3_0");
 ...