JSFiddle - React, Tailwind, and code Playground

by tonytlwu

HTML

<table id="table">

  <tr class="deets">
    <td rowspan="2" style="min-width: 65px;">
      <img src="http://i.pravatar.cc/80?img=65">
      <div class="nominate-btn">
        <input type="button" class="btn btn-primary" value="Nominate" onclick="Fliplet.Navigate.screen(52702, { transition: 'slide.left' });">
      </div>
    </td>
    <td>Ian Broom</td>
    <td>Regional Sales Executive</td>
    <td>Kensington</td>
    <td>London</td>
  </tr>
  <tr>
    <td colspan="4" class="history">
      <p>
        <strong>Recent award nominations:</strong> Fred Smith (Office Manager)
        <br>
        <strong>Recent thank you cards:&nbsp;</strong>
        <br>
        <strong>Recent CX121 stars:</strong>
      </p>
    </td>
  </tr>
  <tr class="deets">
    <td rowspan="2" class="avatar">
      <img src="http://i.pravatar.cc/80?img=49">
      <div class="nominate-btn">
        <strong>Nominated</strong>
      </div>
    </td>
    <td>Jane Smith</td>
    <td>Office Manager</td>
    <td>Kensington</td>
    <td>London</td>
  </tr>
  <tr>
    <td colspan="4" class="history">
      <p>
        <strong>Recent award nominations:</strong> Fred Smith (Office Manager)
        <br>
        <strong>Recent thank you cards:&nbsp;</strong>
        <br>
        <strong>Recent CX121 stars:&nbsp;</strong>
      </p>
    </td>
  </tr>
  <tr class="deets">
    <td rowspan="2" class="avatar">
      <img src="http://i.pravatar.cc/80?img=15">
      <div class="nominate-btn">
        <input type="button" class="btn btn-primary" value="Nominate" onclick="Fliplet.Navigate.screen(52702, { transition: 'slide.left' });">
      </div>
    </td>
    <td>Fred Walker</td>
    <td>Sales Executive</td>
    <td>Kensington</td>
    <td>London</td>
  </tr>
  <tr>
    <td colspan="4" class="history">
      <p>
        <strong>Recent award nominations:</strong> Fred Smith (Office Manager)
        <br>
        <strong>Recent thank you cards:&nbsp;</strong>
        <br>
        <b>Recent CX121 stars:
</b>
     ...

JavaScript

var employees = [];
var employee;

$('#table tr').each(function() {
  var $tr = $(this);
  if ($tr.hasClass('deets')) {
    employee = new Object();
    employee.avatar = $tr.find('td:eq(0) img').attr('src');
    employee.name = $tr.find('td:eq(1)').text().trim();
    employee.title = $tr.find('td:eq(2)').text().trim();
    employee.office = $tr.find('td:eq(3)').text().trim();
    employee.region = $tr.find('td:eq(4)').text().trim();
    return;
  }

  employee.historyText = $tr.find('td.history').text().trim();
  employees.push(employee);
});

console.log(JSON.stringify(employees));

var data = ;