JSFiddle - React, Tailwind, and code Playground

by Aaron Calderon

HTML

<p><strong>Adapted from <a href="http://stackoverflow.com/questions/2006468/copy-paste-from-excel-to-a-web-page">http://stackoverflow.com/questions/2006468/copy-paste-from-excel-to-a-web-page</a></strong></p>

<p>Paste excel data here:</p>
<textarea name="excel_data" style="width:250px;height:150px;"></textarea><br>
<input type="button" onclick="javascript:generateTable()" value="Genereate Table" />
<br><br>
<p>Table data will appear below</p>
<hr>
<div id="excel_table"></div>

<div>
  Paste into the box
  <input type=text id="foo" /><br />

  <div id="bar" />
</div>
<table>
  <tbody>
    <tr>
      <td>
        <p>Monday</p>
        <p id="mon"> </p>
      </td>
      <td>
        <p>Tuesday</p>
        <p id="tue"> </p>
      </td>
      <td>
        <p>Wednesday</p>
        <p id="wed"> </p>
      </td>
      <td>
        <p>Thuresday</p>
        <p id="thu"> </p>
      </td>
      <td>
        <p>Friday</p>
        <p id="fri"> </p>
      </td>
      <td>
        <p>Saturday</p>
        <p id="sat"> </p>
      </td>
      <td>
        <p>Sunday</p>
        <p id="sun"> </p>
      </td>

    </tr>
  </tbody>
</table>

CSS

table {
  border-collapse: collapse;
  border: 1px solid #000000;
}

table td {
  border: 1px solid #000000;
}

JavaScript

function generateTable() {
  var data = $('textarea[name=excel_data]').val();
  console.log(data);
  var rows = data.split("\n");

  var table = $('<table />');

  for (var y in rows) {
    var cells = rows[y].split("\t");
    var row = $('<tr />');
    for (var x in cells) {
      row.append('<td>' + cells[x] + '</td>');
    }
    table.append(row);
  }

  // Insert into DOM
  $('#excel_table').html(table);
}

(function() {
  var textbox = document.getElementById("foo");

  textbox.onpaste = function(event) {
    //console.log(event.clipboardData.getData('text/plain'));
    //console.log(event.clipboardData.getData('text/html'));
    var bar = document.getElementById("bar")
    //var h = (bar.contentDocument || bar.contentWindow);
    //h = h.document || h;
    bar.innerHTML = event.clipboardData.getData('text/html');
    var mon01 = $("#bar table tbody tr:eq(0) td:first-child");
    var mon02 = $("#bar table tbody tr:eq(1) td:first-child");
    var mon03 = $("#bar table tbody tr:eq(2) td:first-child");
    var mon04 = $("#bar table tbody tr:eq(3) td:first-child");
    
    var tue01 = $("#bar table tbody tr:eq(0) td:eq(1)");
    var tue02 = $("#bar table tbody tr:eq(1) td:eq(1)");
    var tue03 = $("#bar table tbody tr:eq(2) td:eq(1)");
    var tue04 = $("#bar table tbody tr:eq(3) td:eq(1)");
    
    var wed01 = $("#bar table tbody tr:eq(0) td:eq(2)");
    var wed02 = $("#bar table tbody tr:eq(1) td:eq(2)");
    var wed03 = $("#bar table tbody tr:eq(2) td:eq(2)");
    var wed04 = $("#bar table tbody tr:eq(3) td:eq(2)");
    
    var thu01 = $("#bar table tbody tr:eq(0) td:eq(3)");
    var thu02 = $("#bar table tbody tr:eq(1) td:eq(3)");
    var thu03 = $("#bar table tbody tr:eq(2) td:eq(3)");
    var thu04 = $("#bar table tbody tr:eq(3) td:eq(3)");
    
    var fri01 = $("#bar table tbody tr:eq(0) td:eq(4)");
    var fri02 = $("#bar table tbody tr:eq(1) td:eq(4)");
    var fri03 = $("#bar table tbody tr:eq(2) td:eq(4)");
    var fri04 = $("#bar table tbody...