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

Asked

Viewed 886 times

3

Hello, I am making a website, which contains a table, however the data from this table needs to be imported from an excel spreadsheet that I have saved here on my machine.. Can someone help me?

If possible, I would like to use pure javascript

javascript html excel

  • There is a tutorial on the link: https://code.tutsplus.com/pt/tutorials/parsing-a-csv-file-with-javascript--cms-25626. if you have difficulty posting the code.

  • Dude, I don’t know if you thought about it, or even, if that’s your problem, but cvs will be imported into the server. It doesn’t make much sense for you to bring in js to do the conversion and then throw the dice on the screen. If I were you, I would send from the server to the client, a formatted JSON, which js understands very well, and then would popular the screen. That in my mind...

1 answer

2


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

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;

  • Okay, I’ll try here and get back to you

  • 1

    I don’t understand why you’re being negative

Browser other questions tagged javascript html excel

You are not signed in. Login or sign up in order to post.