How do I import data from a spreadsheet in excel (csv) into an HTML table?

Question

How do I import data from a spreadsheet in excel (csv) into an HTML table?

Navigation

#1 by (2 votes)

3

Hello, I'm making a website, which contains a table, but the data in this table needs to be imported from an excel sheet that I have saved here on my machine. Can anyone help me?

If possible, I would like to use pure javascript

javascript html excel

asked by anonymous 21.02.2018 / 18:34

1 answer

Create one column indexed to another in R How to protect myself against "MongoInjection"

score 2 · Accepted Answer

Send an ajax to your .csv file and place it inside the resp variable which in my case is inside the popular() function

function popular(){
	var resp = 'nome,sexo,peso\nmarcelo,M,70'; //"deveria" vir do ajax esses dados
	
	var th1  = document.querySelector(".th1"),
	th2      = document.querySelector(".th2"),
	th3      = document.querySelector(".th3"),
	td1      = document.querySelector(".td1"),
	td2      = document.querySelector(".td2"),
	td3      = document.querySelector(".td3");

	var rows = resp.split('\n');
	var cols  = [];
	rows.map(function(row){
		cols.push(row.split(/\, ?/));
	});

	th1.textContent = cols[0][0];
	th2.textContent = cols[0][1];
	th3.textContent = cols[0][2];

	td1.textContent = cols[1][0];
	td2.textContent = cols[1][1];
	td3.textContent = cols[1][2];	

	console.log(cols);
}
popular();

<table>
  <thead>
    <tr>
      <th class="th1"></th>
      <th class="th2"></th>
      <th class="th3"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="td1"></td>
      <td class="td2"></td>
      <td class="td3"></td>
    </tr>
  </tbody>
</table>

Of course you will have to implement as per your needs, this was just a notion of how you could do it;