下表用于创建CSV，但是现在我想用另一种方法来完成整个操作。我想读取CSV并将数据（包括下拉值）传输到表格中。
此刻CSV数据已写入一个文本字段，该文本字段会进行小规模验证。
有人可以告诉我如何将CSV中的数据干净地放入表格中，并在那里进行验证吗？
这是jsfiddle：https://jsfiddle.net/dpgxk01o/12/
multiCapture.php
<form onkeypress="validate()">
<div class="table-wrapper">
<div class="table-scroll">
<table id="myTable" border=1>
<thead>
<tr>
<th></th>
<th>Geschlecht*</th>
<th>Anrede*</th>
<th>Umgangsform*</th>
<th>Titel</th>
<th>Vorname*</th>
<th>Nachname*</th>
<th>E-Mail*</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>
<label>
<input type="checkbox" name="chk"/>
<span></span>
</label>
</p>
</td>
<td>
<div class="input-field">
<div>
<select id="selectOption1" name="select1" class="browser-default genderSelect" required>
<option selected>Bitte auswählen</option>
<option value="m">Männlich</option>
<option value="f">Weiblich</option>
</select>
</div>
</div>
</td>
<td>
<div class="input-field">
<div>
<select id="selectOption2" name="select2" class="browser-default gsAddress" required>
<option selected>Bitte auswählen</option>
<option class="m">Sehr geehrter</option>
<option class="m">Werter</option>
<option class="m">Lieber</option>
<option class="f">Sehr geehrte</option>
<option class="f">Werte</option>
<option class="f">Liebe</option>
</select>
</div>
</div>
</td>
<td>
<div class="input-field">
<div>
<select id="selectOption3" name="select3" class="browser-default umgangsform" required>
<option selected>Bitte auswählen</option>
<option>Per Du</option>
<option>Per Sie</option>
</select>
</div>
</div>
</td>
<td>
<input type="text" class="titel">
</td>
<td>
<input id="vorname" type="text" class="vorname validate" required>
</td>
<td>
<input type="text" class="nachname validate" required>
</td>
<td>
<input type="email" class="email validate" required>
</td>
</tr>
</tbody>
</table>
<p id="test">Empty</p>
</div>
</div>
<br>
<div class="row">
<div class="col s12 m12 l12">
<input type="button" id="makeNew" value="Empfänger hinzufügen">
<input type="button" value="Empfänger löschen" onclick="deleteRow('myTable')"/>
<button id="csvButton" class="right" onclick="csv()">Export to CSV</button>
</div>
</div>
<div class="row">
<div class="col s12 m12 l12">
<p id="warning" class="right" style="margin-top: -15px; color: red;">Bitte füllen Sie alle
Pflichtfelder aus</p>
</div>
</div>
</form>
<script>
function csv() {
const rows = [[geschlecht[0].value, anrede[0].value, umgangsform[0].value, titel[0].value, vorname[0].value, nachname[0].value, email[0].value]];
var universalBOM = "\uFEFF";
var csvContent = '';
rows.forEach(function (rowArray) {
let row = rowArray.join(";");
csvContent += row + "\r\n";
for (i = 1; i < titel.length; i++) {
csvContent += geschlecht[i].value + ';' + anrede[i].value + ';' + umgangsform[i].value + ';' + titel[i].value + ';' + vorname[i].value + ';' + nachname[i].value + ';' + email[i].value + "\r\n";
}
});
var link = document.createElement("a");
link.setAttribute("href", "data:text/csv;utf-8," + encodeURIComponent(universalBOM + csvContent));
link.setAttribute("download", "export.csv");
document.body.appendChild(link); // Required for FF
link.click(); // This will download the data file named "export.csv".
}
</script>
eCard-NEW.php
<div class="collapsible-body">
<div class="container" style="width: 90%;">
<h5>Erfassen</h5>
<div class="col s12 m12 l12">
<?php include "multiCapture.php"; ?>
</div>
</div>
<h2>CSV - Import</h2>
<a class="modal-trigger" href="#modal1"><i class="material-icons" style="color: red;">info</i></a>
<input type="file" id="files" name="file"/>
<span class="readBytesButtons">
<button type="button">Datei laden</button>
</span>
<p>Hier einen oder mehrere Empfänger eintragen</p>
<textarea name="textareaMails" placeholder="m;Herr;Max;Mustermann;Prof.;max.mustermann@muster.ch" id="textareaMails"
style="height: 300px; border:solid 1px gray; resize: none;"></textarea>
<div>
<button type="button" onclick="checkMailAdresses()" style="float: left; margin-right: 10px;">überprüfen</button>
<p id="errorMail" style="color: red"></p>
</div>
</div>
<script>
//Liest ein csv-file ein und schreibt den Inhalt in die textarea
function readBlob(opt_startByte, opt_stopByte) {
var files = document.getElementById('files').files;
if (!files.length || !((files[0].name).endsWith(".csv"))) {
alert('Bitte eine .csv-Datei auswählen!');
return;
}
var file = files[0];
var start = parseInt(opt_startByte) || 0;
var stop = parseInt(opt_stopByte) || file.size - 1;
var reader = new FileReader();
// If we use onloadend, we need to check the readyState.
reader.onloadend = function (evt) {
if (evt.target.readyState == FileReader.DONE) { // DONE == 2
document.getElementById('textareaMails').value += evt.target.result;
}
};
var blob = file.slice(start, stop + 1);
reader.readAsText(blob, 'windows-1252');
}
document.querySelector('.readBytesButtons').addEventListener('click', function (evt) {
if (evt.target.tagName.toLowerCase() == 'button') {
var startByte = evt.target.getAttribute('data-startbyte');
var endByte = evt.target.getAttribute('data-endbyte');
readBlob(startByte, endByte);
}
}, false);
//Überprüft ob das Format der Emailadressen der Empfänger stimmt
function checkMailAdresses() {
var area = document.getElementById('textareaMails').value.trim();
if (area == false) {
document.getElementById('errorMail').innerHTML = "Keine Daten eingetragen.";
document.getElementById('textareaMails').style.border = "solid 1px gray";
return false;
}
document.getElementById('errorMail').innerHTML = "";
var lines = document.getElementById('textareaMails').value.split('\n');
document.getElementById('errorMail').style.color = "red";
for (var i = 0; i < lines.length; i++) {
if (lines[i] === "") {
} else {
var temp = lines[i];
var count = (temp.match(/;/g) || []).length;
var partsOfStr = lines[i].split(';');
document.getElementById('test').innerHTML = lines;
//überprüft ob richtige Anzahl Attribute vorhanden
if (count > 6) {
document.getElementById('errorMail').innerHTML = "Zeile " + (i + 1) + ": Zu viele Attribute. Semikola sind nur zur Trennung von Attributen/Spalten erlaubt.";
document.getElementById('errorMail').style.foregroundColor = "red";
return false;
}
else if (count < 5) {
document.getElementById('errorMail').innerHTML = "Zeile " + (i + 1) + ": zu wenig Attribute/Spalten";
document.getElementById('errorMail').style.foregroundColor = "red";
document.getElementById('textareaMails').style.border = "solid 2px red";
return false;
}
//überprüft das Geschlecht
else if (partsOfStr[0] !== "m" && partsOfStr[0] !== "w") {
document.getElementById('errorMail').innerHTML = "Zeile " + (i + 1) + ": Das Geschlecht hat das falsches Format >" + partsOfStr[0] + "< \n nur m/w erlaubt.";
document.getElementById('textareaMails').style.border = "solid 2px red";
return false;
}
//überprüft die Anrede
else if (partsOfStr[1] === "") {
document.getElementById('errorMail').innerHTML = "Zeile " + (i + 1) + ": Die Anrede darf nicht leer sein.";
document.getElementById('textareaMails').style.border = "solid 2px red";
return false;
}
else if ((partsOfStr[1].length > 60)) {
document.getElementById('errorMail').innerHTML = "Zeile " + (i + 1) + ": Die Anrede darf maximal 60 Zeichen beinhalten >" + partsOfStr[1] + "<.";
document.getElementById('textareaMails').style.border = "solid 2px red";
return false;
}
//Überprüft den Vornamen
else if (partsOfStr[4] === "") {
document.getElementById('errorMail').innerHTML = "Zeile " + (i + 1) + ": Der Vorname darf nicht leer sein.";
document.getElementById('textareaMails').style.border = "solid 2px red";
return false;
}
else if ((partsOfStr[4].length > 60)) {
document.getElementById('errorMail').innerHTML = "Zeile " + (i + 1) + ": Der Vorname darf maximal 60 Zeichen beinhalten >" + partsOfStr[2] + "<.";
document.getElementById('textareaMails').style.border = "solid 2px red";
return false;
}
//Überprüft den Nachnamen
else if (partsOfStr[5] === "") {
document.getElementById('errorMail').innerHTML = "Zeile " + (i + 1) + ": Der Nachname darf nicht leer sein.";
document.getElementById('textareaMails').style.border = "solid 2px red";
return false;
}
else if ((partsOfStr[5].length > 60)) {
document.getElementById('errorMail').innerHTML = "Zeile " + (i + 1) + ": Der Nachname darf maximal 60 Zeichen beinhalten >" + partsOfStr[3] + "<.";
document.getElementById('textareaMails').style.border = "solid 2px red";
return false;
}
//Überprüft den Titel
else if (partsOfStr[3] === "") {
document.getElementById('errorMail').innerHTML = "Zeile " + (i + 1) + ": Der Titel darf nicht leer sein.";
document.getElementById('textareaMails').style.border = "solid 2px red";
return false;
}
else if ((partsOfStr[3].length > 60)) {
document.getElementById('errorMail').innerHTML = "Zeile " + (i + 1) + ": Der Titel darf maximal 60 Zeichen beinhalten >" + partsOfStr[4] + "<.";
document.getElementById('textareaMails').style.border = "solid 2px red";
return false;
}
//Überprüft ob gültige Email
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,5})+$/.test(partsOfStr[6]) == false) {
document.getElementById('errorMail').innerHTML = "Zeile " + (i + 1) + ": ungülte E-Mail >" + partsOfStr[6] + "<";
document.getElementById('textareaMails').style.border = "solid 2px red";
return false;
}
}
}
document.getElementById('errorMail').innerHTML = "Überprüfung erfolgreich";
document.getElementById('errorMail').style.color = "green";
document.getElementById('textareaMails').style.border = "solid 2px green";
console.log("Send Formular");
document.getElementById('sendForm').setAttribute('type', 'submit');
document.getElementById('sendForm').submit();
}
</script>