I’m very newbie on javascript and html, i’m sorry for elementar question.
I have a csv that I would like to read and transform into an html table and the values of the first column transform them into barcodes and insert them into the table, here is the code, unfortunately I have incorrectly set the parse of the rows inside the csv, but I can not see where. Please can you help me, I know I am a beginner and I apologize for the silly question.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<style>
<!-- qui il css per la tabella -->
</style>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/JsBarcode.all.min.js"></script>
<script>
function createSVG() {
var svg = document.createElementNS("http://www.w3.org/2000/svg", 'svg');
svg.setAttribute('id', 'barCode');
document.body.appendChild(svg);
}
function myFunction() {
createSVG();
var x = document.createElement("TR");
x.setAttribute("id", "myTr");
document.getElementById("myTable").appendChild(x);
var y = document.createElement("TD");
var el = document.getElementById("barCode");
var barcode = document.createElementNS("http://www.w3.org/2000/svg", "svg");
barcode += JsBarcode("#barCode", "ciao");
y.appendChild(barcode);
document.getElementById("myTr").appendChild(y);
}
</script>
<script>
function Upload() {
function createSVG() {
var svg = document.createElementNS("http://www.w3.org/2000/svg", 'svg');
svg.setAttribute('class', 'barCode');
document.body.appendChild(svg);
}
var fileUpload = document.getElementById("fileUpload");
var regex = /^([a-zA-Z0-9s_\.-:])+(.csv|.txt)$/;
if (regex.test(fileUpload.value.toLowerCase())) {
if (typeof (FileReader) != "undefined") {
var reader = new FileReader();
reader.onload = function (e) {
var table = document.createElement("table");
const tR = document.createElement("tr");
const tD = document.createElement("td");
table.setAttribute("id", "mytable");
var rows = e.target.result.split("n");
for (var i = 0; i < rows.length; i++) {
var cells = rows[i].split(";", 5);
var cellsq = rows[2].split(";", 5); <!-- questo รจ il mio dataset pulito dalle ultime colonne prende solo la riga 2
var cellsw = rows[3].split(";", 5); <!-- prende solo la riga 3
var cella = rows[a].split(";", 5);
if (cells.length > 1) {
var row = table.insertRow(-1);
const tDt = document.createElement("td");
const cellsText = document.createTextNode(cells);
tDt.appendChild(cellsText);
tR.appendChild(tDt);
document.body.appendChild(tDt);
createSVG();
var tDb = document.createElement("td");
var elb = document.getElementById("barCode");
var barcode = document.createElementNS("http://www.w3.org/2000/svg", "svg");
var barcodE = "<svg class='barCode' >" + JsBarcode(".barCode", cells[0].split(",")) + "</svg>";
tDb.append(barcodE);
tR.appendChild(tDb);
for (var j = 0; j < cells.length; j++) {
var cell = row.insertCell(-1);
cell.innerHTML = cells[j];
}
}
}
var dvCSV = document.getElementById("dvCSV");
dvCSV.innerHTML = "";
dvCSV.appendChild(table);
document.body.appendChild(table);
}
reader.readAsText(fileUpload.files[0]);
} else {
alert("This browser does not support HTML5.");
}
} else {
alert("Please upload a valid CSV file.");
}
}
</script>
</head>
<body>
<p>Click the button to create a TR and a TD element.</p>
<button onclick="myFunction()">Try it</button>
<input type="file" id="fileUpload" />
<input type="button" id="upload" value="Upload" onclick="Upload()" />
<hr />
<div id="dvCSV"></div>
<table id="mytable"></table>
</body>
</html>
my goal would be to generate a table of the type where the last column is populated by the individual barcodes of the first values