JSFiddle - React, Tailwind, and code Playground

by oscard

HTML

<table id="example-table" class="table">
  <tbody>
    <tr>
      <td>Indice de référence</td>
      <td>MSCI Europe (NR)</td>
    </tr>
    <tr>
      <td>Eligibilité au PEA</td>
      <td>Oui</td>
    </tr>
    <tr>
      <td>Eligibilité à une assurance vie</td>
      <td>Oui</td>
    </tr>
    <tr>
      <td>Nationalité</td>
      <td>France</td>
    </tr>
    <tr>
      <td>Forme juridique</td>
      <td>FCP</td>
    </tr>
    <tr>
      <td>Date de lancement</td>
      <td>01/04/2015</td>
    </tr>
    <tr>
      <td>Devise de référence (de la part)</td>
      <td>Euro</td>
    </tr>
    <tr>
      <td>Gérant</td>
      <td>Pierre-Marie PIQUET</td>
    </tr>
    <tr>
      <td>Société de gestion</td>
      <td>BNP PARIBAS ASSET MANAGEMENT</td>
    </tr>
    <tr>
      <td>Gestionnaire financier par délégation</td>
      <td>BNP PARIBAS INVESTMENT PARTNERS UK LTD</td>
    </tr>
    <tr>
      <td>Dépositaire</td>
      <td>BNP PARIBAS SECURITIES SERVICES</td>
    </tr>
    <tr>
      <td>Droits d'entrée max.</td>
      <td>3%</td>
    </tr>
    <tr>
      <td>Droit de sortie max.</td>
      <td> 0%</td>
    </tr>
    <tr>
      <td>Frais courants estimés au 01/04/2015</td>
      <td> 2,20%</td>
    </tr>
    <tr>
      <td>Commission de gestion max (annuel)</td>
      <td> 1,50% maximum</td>
    </tr>
    <tr>
      <td>Périodicité de la VL</td>
      <td>Quotidienne</td>
    </tr>
    <tr>
      <td>Investissement minimum</td>
      <td>10 000 EUR</td>
    </tr>
    <tr>
      <td>Nombre de part minimun initial</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Nombre de part minimun ultérieur</td>
      <td>0,01</td>
    </tr>
    <tr>
      <td>Exécution/type de cours</td>
      <td>VL J+1</td>
    </tr>
  </tbody>
</table>

<div id="view"></div>

CSS

* {
  outline: none;
  font-family: sans-serif;
  font-size: 12px;
}

table {
  border-spacing: 0px;
  border-collapse: collapse;
  border: 0;
}

th,
td {
  cursor: pointer;
}

th {
  background: lightblue;
  border: 1px solid #ccc;
  padding: 5px;
  text-transform: uppercase;
}

tr {
  border: 0px solid #ccc;
}

td {
  border: 1px solid #ccc;
  padding: 5px;
}

JavaScript

/*function generateTableHeader() {
    //var ths = '';
    var row = $("<tr />")
    $.each(tableData[0], function (key, values) {
        row.append('<th>' + key + '</th>');
    });
    //$('table').append('<tr>' + ths + '</tr>');
    $('table').append(row);
}

function generateTableRow() {
    for (var j = 0; j < tableData.length; j++) {
        var row = $("<tr />");
        $.each(tableData[j], function (i, data) {
            row.append('<td>' + data + '</td>');
        });
        $('table').append(row);
    }
}

generateTableHeader();
generateTableRow();

$('tr').click(function () {
    var target = $(event.target);
    if ($(this).next('tr').find('td').hasClass('row_comment')) {
        $(this).next('tr').remove();
    } else if (target.is('td')) {
        $(this).after("<tr><td colspan='5' class='row_comment'>Comment</td></tr>");
    }
});*/
var view = $("<div />");
$("table").find('tr').each(function (i) {
  view.append(i + ":{'" + $(this).find('td').text() + "',}");
});
var data = '{'+view+'}';
$('table').after(JSON.stringify(data));