JSFiddle - React, Tailwind, and code Playground

by jasonkylefrank

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 id="pastein" name="excel_data" style="width:250px;height:150px;"></textarea><br>
    
    <input id="textField" type="text" />
    <!-- <input type="button" onclick="javascript:generateTable()" value="Genereate Table"/> -->
<br><br>
    <p>Table data will appear below</p>
<hr>
<div id="excel_table"></div>

CSS

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

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

JavaScript

function generateTable(inputId) {

		console.log(inputId);

    var data = $(inputId).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);
}

$(document).ready(function() {

	const inputId = '#pastein';
  //const inputId = '#textField';
  //console.log($(inputId));
  
  
	$(inputId).on('paste', function(event) {
      $(inputId).on('input', function() {
        generateTable(inputId); 
        $(inputId).off('input');
      })
  })
})