What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

Excel to HTML Table (Specific Columns, First Row ignored)

master-pc

New member
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.
Code:
<body>
        <h2>Data in excel file</h2>
        <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>

Here is my excel file below:

2021-07-04_103749.png

What I expected:
NameUser IDStaff TypeSalarySelected
Jack SparrowU382Full Time56000Pirate
...............

What I actually got:

2021-07-04_103859.png

As you can see, upon opening the file, the code read EVERY SINGLE ROW AND COLUMN, which is not what I want. I want it to read specific columns, and the first header in the excel file ignored. How can I rewrite my code?

Thanks and hope to hear from you soon.
 
There are two ways of customizing the app by https://mlsdev.com/blog/healthcare-mobile-app-development. You can either write your own program in C++ or Java or whatever language your phone can run. Then, there's the option of using the android native development tools and SDK. All the android software development services provider will do is help you write your program in whatever programming language you use. Of course, the programming code will get converted to C++ or Java at runtime.
 
Last edited:
Back
Top