<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<textarea id="txtData" style="width: 100%;height: 300px;">
</textarea>
<hr>
<table id="tblData">
<thead>
<tr>
<th>E-Mail</th>
<th>Name</th>
<th>Surname</th>
<th>Reference</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
function parseData(rawText) {
var tblData = document.querySelector('#tblData tbody');
tblData.innerHTML = '';
rawText = rawText.trim();
var trs = rawText.split('\n');
if (trs != null && trs.length > 0) {
for (var i = 0; i < trs.length; i++) {
var tds = trs[i].trim().split('\t');
if (tds.length == 4) {
let tr = document.createElement('tr');
for (var j = 0; j < tds.length; j++) {
let td = document.createElement('td');
td.innerText = tds[j];
tr.appendChild(td);
}
tblData.appendChild(tr);
}
}
}
console.log(rawText);
}
document.getElementById("txtData").addEventListener('change', function (e) {
parseData(e.target.value);
}, false);
</script>
</body>
</html>