Save the table contents to a variable first and set it to the innerHTML afterwards. Everytime you add a Try this: Because you are planning on using the ADDENDUM To load a file with javascript you have
to use the 1.Create a input field 2.Trigger a response on change of this input 3.Parse the result to an array by using split/push. This uses [or you can use a third party plugin which will parse the CSV for
you: papa parse, for instance] Display any CSV file as a searchable, filterable, pretty HTML table. Done in 100% JavaScript. Check out the working demo: //csv-to-html-table.netlify.app/ If you want to do custom formatting for one or more column, you can pass in an array of arrays containing the index of the column and a custom function for formatting it. You can pass in multiple formatters and they will be executed in order. The custom functions must take in one parameter [the value in the cell] and return a HTML string: Example: Note that you should take care about HTML escaping to avoid XSS or broken layout. jQuery has a nice function text[] which safely escapes HTML from value. You can run this
locally using this handy python command: ...or with Python 3: navigate to //localhost:8000/ GitHub pages You can host your table on GitHub pages for free! Once you've made all your changes and committed them, push everything in the
Then navigate to //your-github-username.github.io/csv-to-html-table/ Read more on working with
GitHub pages projects. Web server This project should work on any web server. Upload this entire project [including all the Want to embed your nifty table on your website? You can use an
iframe. Once you've deployed your table [above in step 5] you can link to it in an iframe right in your HTML. If your table isn't displaying any data, try the following: If something is not behaving intuitively, it is a bug, and should be reported. Report it here: //github.com/derekeder/csv-to-html-table/issues Copyright [c] 2018 Derek Eder. Released under the
MIT License. [or any not singleton tag for that matter], the browser immediately renders the closing tag. function createTable[] {
var array = [[1,2,3],[4,5,6],[7,8,9]];
var content = "";
array.forEach[function[row] {
content += "
";
row.forEach[function[cell] {
content += " ";
}];
document.getElementById["1"].innerHTML = content;
}
" + cell + " " ;
}];
content += "FileReader
API, IE9 support is off the table anyways. Updated the above function to use the 'newer' forEach
array functionFileReader
HTML5 API. I can give you some pointers as to how you should go about doing this. This is all untested code, but it gives you a little idea what to do
var file = document.getElementById['file'];
file.addEventListener['change', function[] {
var reader = new FileReader[];
var f = file.files[0];
reader.onload = function[e] {
var CSVARRAY = parseResult[e.target.result]; //this is where the csv array will be
};
reader.readAsText[f];
}];
\n
as row delimiter and ,
as cell delimiter. function parseResult[result] {
var resultArray = [];
result.split["\n"].forEach[function[row] {
var rowArray = [];
row.split[","].forEach[function[cell] {
rowArray.push[cell];
}];
resultArray.push[rowArray];
}];
return resultArray;
}
CSV to HTML Table
Usage
1. Clone this repository [in the command line]
git clone :derekeder/csv-to-html-table.git
cd csv-to-html-table
2. Add your CSV file to the
data/
folder3. In
index.html
set your options in the CsvToHtmlTable.init[]
function
CsvToHtmlTable.init[{
csv_path: 'data/Health Clinics in Chicago.csv',
element: 'table-container',
allow_download: true,
csv_options: {separator: ',', delimiter: '"'},
datatables_options: {"paging": false}
}];
Available options
Custom formattingcsv_path
Path to your CSV file.element
The HTML element to render your table to. Defaults to table-container
allow_download
if true, shows a link to
download the CSV file. Defaults to false
csv_options
jQuery CSV configuration. Use this if you want to use a custom delimiter
or separator
in your input file. See their documentation.datatables_options
DataTables configuration. See their documentation.custom_formatting
New! A list
of column indexes and custom functions to format your data [see below]
//my custom function that creates a hyperlink
function format_link[link]{
if [link]
return "" + link + "";
else
return "";
}
//initializing the table
CsvToHtmlTable.init[{
csv_path: 'data/Health Clinics in Chicago.csv',
element: 'table-container',
allow_download: true,
csv_options: {separator: ',', delimiter: '"'},
datatables_options: {"paging": false},
custom_formatting: [[4, format_link]] //execute the function on the 4th column of every row
}];
4. Run it
python -m SimpleHTTPServer
5. Deploy it
master
branch to gh-pages
which automatically enables GitHub pages.git push origin master:gh-pages
css
, data
, fonts
and js
folders] to a public folder on your server using FTP.6. iframe it [optional]
Dependencies
Common issues/troubleshooting
Errors / Bugs
Contributors
Note on Patches/Pull Requests
Copyright
How do I display a CSV file in HTML table?
How do I display a CSV file in JavaScript?
How do you insert a CSV file in HTML?
Can JavaScript parse csv?
Chủ Đề
Display csv file in html table javascript
Display any CSV file as a searchable, filterable, pretty HTML table..
Clone this repository [in the command line] git clone git@github.com:derekeder/csv-to-html-table.git cd csv-to-html-table..
Add your CSV file to the data/ folder..
In index. html set your options in the CsvToHtmlTable. init[] function..
1B] THE JAVASCRIPT.
reader. readAsText[SELECTED FILE] Read the selected CSV file as text..
let csv = reader. result. split["\r\n"] Remember that CSV files uses \r\n to indicate new rows? ... .
for [let row of csv] { for [let col of row. split[","]] For each row, we further break down the columns and draw the table rows/cells..
On the File menu, click Import. In the Import dialog box, click the option for the type of file that you want to import, and then click Import. In the Choose a File dialog box, locate and click the CSV, HTML, or text file that you want to use as an external data range, and then click Get Data.
Comma Separated Values [CSV] is used as a common format to exchange tabular data between spreadsheets and relational databases. In a JavaScript action, you can parse CSV data using the csv library.