1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Excel to HTML Table

Discussion in 'HTML & Website Design' started by master-PC, Jul 3, 2021.

0
  1. #1
    I am trying to create an HTML table that reads in Excel file. At the rightmost column, is a checkbox column where we can select the rows we want. The user opens the file, and then reads it to a table.

    <!DOCTYPE html>
<html>
<script src="https://unpkg.com/read-excel-file@4.x/bundle/read-excel-file.min.js"></script>
<link rel="stylesheet" href="styles.css">
</table>
</head>



<body>
<h1>Data in excel file</h1>
<input type="file" id="input">
<table id="tdata">
<thead>
<tr>
<th>Name</th>
<th>User ID</th>
<th>Staff Type</th>
<th>Salary</th>
<th>Selected</th>
</tr>
<script>
var input=document.getElementById('input');
input.addEventListener('change', function() {
readXlsxFile(input.files[0]).then(function(data) {
var i=1;
data.map((row,index)=>
{
let table=document.getElementById('tdata');
generateTableRows(table,row);
});
});
});
function generateTableHead(table,data)
{
let thead=table.createTHead();
let row=thead.insertRow();
for(let key of data) {
let th=document.createElement('th');
let text=document.createTextNode(key);
th.appendChild(text);
row.appendChild(th);
}
}
function generateTableRows(table,data)
{
let newRow=table.insertRow(-1);
data.map((row,index)=>{
let newCell=newRow.insertCell();
let newText=document.createTextNode(row);
newCell.appendChild(newText);
});
}
</script>
</thead>
</table>
</body>

<body>
    Code (markup):
    My excel file:
    UserName UserID MemberSince Staff Type Salary Position
    -------------------------------------------------------
    Jack Sparrow U382 4/2/2011 Full Time 56000 Pirate
    Pikachu U712 7/3/2005 Part Time 50000 Pokemon
    Sonic U555 12/7/2009 Part Time 35000 Runner
    Mario U153 1/1/2012 Part Time 4500 Plumber
    Godzilla U999 6/6/2020 Full Time 6000 Kaiju

    The problem is that the table reads every single row and column, which I do not want. I want the header in the excel file, and some columns omitted when it is reading the file to the table.

    How can I change the table so that it only reads selected columns? And how to I add the checkbox column to the last row?
     
    Last edited: Jul 3, 2021
    master-PC, Jul 3, 2021 IP
  2. mmerlinn

    mmerlinn Prominent Member

    Messages:
    3,197
    Likes Received:
    818
    Best Answers:
    7
    Trophy Points:
    320
    #2
    I don't have an answer to your problem, but I noted the following error in your HTML code.

    You have an H2 tag in your HTML code. By definition, you CANNOT have an H2 tag without a preceding H1 tag.
     
    mmerlinn, Jul 3, 2021 IP
  3. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #3
    after this line do a check that there is data (ie not an empty row), or that it meets some either criteria. You can either examine the row, or the row number (key).
    for(let key of data) {
     
    sarahk, Jul 3, 2021 IP