JSFiddle - React, Tailwind, and code Playground

by kuraba

HTML

<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://github.com/caike/jQuery-Simple-Timer/blob/master/jquery.simple.timer.js"></script>
<html>

  <head>
    <style type="text/css">
      body {
        font-family: sans-serif;
        font-weight: 300;
        padding-top: 30px;
        color: #666;
      }

      .container {
        text-align: center;
      }

      a {
        color: #1C2045;
        font-weight: 350;
      }

      table {
        font-weight: 300;
        margin: 0px auto;
        border: 1px solid #1C2045;
        padding: 5px;
        color: #666;

      }

      th,
      td {
        border-bottom: 1px solid #dddddd;
        text-align: center;
        margin: 10px;
        padding: 0 10px;
      }

      hr {
        border: 0;
        border-top: 1px solid #E7C254;
        margin: 20px auto;
        width: 50%;
      }

      .button {
        background-color: #1C2045;
        color: #E7C254;
        padding: 5px 20px;
        max-width: 300px;
        line-height: 1.5em;
        text-align: center;
        margin: 5px auto;
      }

      .button a {
        color: #E7C254;
      }

      .refs {
        display: block;
        margin: auto;
        text-align: left;
        max-width: 500px;
      }

      .refs .label {
        font-size: 1.4em;
      }

      .refs>ul {
        margin-top: 10px;
        line-height: 1.5em;
      }

    </style>
  </head>

  <body>

    <div id="jquery-script-menu">
      <div class="container">
        <div class="timer timer2 alert alert-primary" data-minutes-left="0.1"></div>
      </div>
    </div>

    <div class='container'>
      <div id="dvData">
        <table>
          <tr>
            <th>Column One</th>
            <th>Column Two</th>
            <th>Column Three</th>
          </tr>
          <tr>
            <td>Row 1 Col 1</td>
            <td>Row 1 Col 2</td>
            <td>Row 1 Col 3 </td>
          </tr>
          <tr>
            <td>Row 2...

JavaScript

$(document).ready(function() {
          function exportTableToCSV($table, filename) {
            var $headers = $table.find('tr:has(th)'),
              $rows = $table.find('tr:has(td)'),
              tmpColDelim = String.fromCharCode(11), // vertical tab character
              tmpRowDelim = String.fromCharCode(0), // null character
              colDelim = ';',
              rowDelim = '\r\n';
            var csv = '';
            //csv += formatRows($headers.map(grabRow));
            csv += formatRows($rows.map(grabRow)) + '';
            csv += rowDelim;

            var csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);
            $(this)
              .attr({
                'download': filename,
                'href': csvData
                //,'target' : '_blank' //if you want it to open in a new window
              });
            //------------------------------------------------------------
            // Helper Functions 
            //------------------------------------------------------------
            // Format the output so it has the appropriate delimiters
            function formatRows(rows) {
              return rows.get().join(tmpRowDelim)
                .split(tmpRowDelim).join(rowDelim)
                .split(tmpColDelim).join(colDelim);
            }
            // Grab and format a row from the table
            function grabRow(i, row) {
              var $row = $(row);
              //for some reason $cols = $row.find('td') || $row.find('th') won't work...
              var $cols = $row.find('td');
              if (!$cols.length) $cols = $row.find('th');
              return $cols.map(grabCol)
                .get().join(tmpColDelim);
            }
            // Grab and format a column from the table 
            function grabCol(j, col) {
              var $col = $(col),
                $text = $col.text();
              return $text.replace('"', '""'); // escape double quotes
            }
      ...