JSFiddle - React, Tailwind, and code Playground

by neonDog

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>
<table id="excel_table"><tbody></tbody></table>

CSS

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

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

JavaScript

function tableGenerator(table, val) {

  const rows = val.split("\n");
	table.innerHTML = '';
  
  for (const y in rows) {
      const cells = rows[y].split("\t");
      const row = document.createElement('tr');
      
      let rowHTML = '';
      for (const x in cells) {
      
        let username = cells[x];
        if (!username.includes('https://instagram.com/')) {
          username = 'https://instagram.com/' + username;
        }
          rowHTML += `<td>${y} <a href="${username}">${username}</a></td>`;
      }
      
      row.innerHTML = rowHTML;
      table.append(row);
      const rowSpacer = document.createElement('tr');
      rowSpacer.innerHTML = '<td></td>';
      table.append(rowSpacer);
  }
}

const tbody = document.body.querySelector('table tbody');

const generateTable = function() {
	tableGenerator(tbody, document.body.getElementsByTagName('textarea')[0].value);
};