JSFiddle - React, Tailwind, and code Playground
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 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;
}
JavaScript
function removeExtraTabs(string) {
return string.replace(new RegExp("\t\t", 'g'), "\t");
}
function generateTable() {
var data = removeExtraTabs($('#pastein').val());
var rows = data.split("\n");
var table = $('<table />');
for (var y in rows) {
rows[y] = removeExtraTabs(rows[y]);
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() {
$('#pastein').on('paste', function(event) {
$('#pastein').on('input', function() {
generateTable();
$('#pastein').off('input');
})
})
})