Convert Excel sheet data to HTML with Javascript-CodePudding

I'm using this js application found here: https://www.youtube.com/watch?v=u7R7yuQ6g9Y

const excel_file = document.getElementById('excel_file');

excel_file.addEventListener('change', (event) => {

      if (!['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-excel'].includes(event.target.files[0].type)) {
            document.getElementById('excel_data').innerHTML = '<div >Only .xlsx or .xls file format are allowed</div>';

            excel_file.value = '';

            return false;
      }

      var reader = new FileReader();

      reader.readAsArrayBuffer(event.target.files[0]);

      reader.onload = function (event) {

            var data = new Uint8Array(reader.result);

            var work_book = XLSX.read(data, { type: 'array' });

            var sheet_name = work_book.SheetNames;

            var sheet_data = XLSX.utils.sheet_to_json(work_book.Sheets[sheet_name[0]], { header: 1 });

            if (sheet_data.length > 0) {
                  var table_output = '<table  id="listViewTable">';

                  for (var row = 0; row < sheet_data.length; row  ) {

                        table_output  = '<tr >';

                        for (var cell = 0; cell < sheet_data[row].length; cell  ) {

                              if (row == 0) {

                                    table_output  = '<th >'   sheet_data[row][cell]   '</th>';

                              }
                              else {

                                    table_output  = '<td >'   sheet_data[row][cell]   '</td>';

                              }

                        }

                        table_output  = '</tr>';

                  }

                  table_output  = '</table>';

                  document.getElementById('excel_data').innerHTML = table_output;
            }

            excel_file.value = '';

      }

});

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8" />
    <title>Convert Excel to HTML Table using JavaScript</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/xlsx.full.min.js"></script>
</head>
<body>
    <div >
        <h2 >Convert Excel to HTML Table using JavaScript</h2>
        <div >
            <div ><b>Select Excel File</b></div>
            <div >
                
                <input type="file" id="excel_file" />

            </div>
        </div>
        <div id="excel_data" ></div>
    </div>
    <script src="excel.js"></script>
</body>
</html>

Here's what I need: Some columns need different styling. How can I get an output like this:

<tr >
<td ></td>
<td ></td>
<td ></td>
</tr>

and in a different case something like:

<div >
  <div >
    <p >content of column 2</p>
  </div>
  <div >
    <p >content of column 3</p>
  </div>
</div>

That would make it possible to do so much more with it, like also write the data in a bootstrap grid system with different styles for different cols etc.

Here are two examples for the desired output:

#1: For HTML Table with different classes for different columns:

table-th-c1	table-th-c2	table-th-c3	table-th-c4	table-th-c5
Column 1, class 1	Column 2, class 2	Column 3, class 3	Column 4, class 4	Column 5, class 5
Column 1, class 1	Column 2, class 2	Column 3, class 3	Column 4, class 4	Column 5, class 5
Column 1, class 1	Column 2, class 2	Column 3, class 3	Column 4, class 4	Column 5, class 5
Column 1, class 1	Column 2, class 2	Column 3, class 3	Column 4, class 4	Column 5, class 5

#2: For the bootstrap grid system:

table-th-c1	table-th-c2	table-th-c3	table-th-c4	table-th-c5	Table-th-c6
Container 1, Row 1, Column 1	Container 1, Row 2, Column 1	Container 1, Row 2, Column 2	Container 1, Row 3, Column 1	Container 1, Row 3, Column 2	Container 1, Row 3, Column 3
Container 2, Row 1, Column 1	Container 2, Row 2, Column 1	Container 2, Row 2, Column 2	Container 2, Row 3, Column 1	Container 2, Row 3, Column 2	Container 2, Row 3, Column 3
Container 3, Row 1, Column 1	Container 3, Row 2, Column 1	Container 3, Row 2, Column 2	Container 3, Row 3, Column 1	Container 3, Row 3, Column 2	Container 3, Row 3, Column 3
Container 4, Row 1, Column 1	Container 4, Row 2, Column 1	Container 4, Row 2, Column 2	Container 4, Row 3, Column 1	Container 4, Row 3, Column 2	Container 4, Row 3, Column 3

Thank you for your help; it is greatly appreciated!

CodePudding user response：

If we want to just answer it in the way you have chosen; (Defining many classes - Not good way)

(Just you have to know how to deal with strings in loop)

The example code should be something like this:

table_output  = '<th >'   sheet_data[row][cell]   '</th>';

const excel_file = document.getElementById('excel_file');

excel_file.addEventListener('change', (event) => {

      if (!['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-excel'].includes(event.target.files[0].type)) {
            document.getElementById('excel_data').innerHTML = '<div >Only .xlsx or .xls file format are allowed</div>';

            excel_file.value = '';

            return false;
      }

      var reader = new FileReader();

      reader.readAsArrayBuffer(event.target.files[0]);

      reader.onload = function (event) {

            var data = new Uint8Array(reader.result);

            var work_book = XLSX.read(data, { type: 'array' });

            var sheet_name = work_book.SheetNames;

            var sheet_data = XLSX.utils.sheet_to_json(work_book.Sheets[sheet_name[0]], { header: 1 });

            if (sheet_data.length > 0) {
                  var table_output = '<table  id="listViewTable">';

                  for (var row = 0; row < sheet_data.length; row  ) {

                        table_output  = '<tr >';

                        for (var cell = 0; cell < sheet_data[row].length; cell  ) {

                              if (row == 0) {

                                    table_output  = '<th >'   sheet_data[row][cell]   '</th>';

                              } else {

                                    table_output  = '<td >'   sheet_data[row][cell]   '</td>';

                              }

                        }

                        table_output  = '</tr>';

                  }

                  table_output  = '</table>';

                  document.getElementById('excel_data').innerHTML = table_output;
            }

            excel_file.value = '';

      }

});

.row2-cell2{color:red}

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8" />
    <title>Convert Excel to HTML Table using JavaScript</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/xlsx.full.min.js"></script>
</head>
<body>
    <div >
        <h2 >Convert Excel to HTML Table using JavaScript</h2>
        <div >
            <div ><b>Select Excel File</b></div>
            <div >
                
                <input type="file" id="excel_file" />

            </div>
        </div>
        <div id="excel_data" ></div>
    </div>
    <script src="excel.js"></script>
</body>
</html>

But what you actually need is Tree-structural pseudo-classes:

The :nth-child can handle it, even better than what you expect:

How customize a specific cell in a HTML table, without define a class or id?

table tr:nth-child(2) td:nth-child(3) {
  color: red;
}
table tr:nth-child(odd) td:nth-child(1) {
  color: blue;
}

<table>
  <tr>
    <td>Row 1 - Col 1</td>
    <td>Row 1 - Col 2</td>
    <td>Row 1 - Col 3</td>
    <td>Row 1 - Col 4</td>
    <td>Row 1 - Col 5</td>
  </tr>
  <tr>
    <td>Row 2 - Col 1</td>
    <td>Row 2 - Col 2</td>
    <td>Row 2 - Col 3</td>
    <td>Row 2 - Col 4</td>
    <td>Row 2 - Col 5</td>
  </tr>
  <tr>
    <td>Row 3 - Col 1</td>
    <td>Row 3 - Col 2</td>
    <td>Row 3 - Col 3</td>
    <td>Row 3 - Col 4</td>
    <td>Row 3 - Col 5</td>
  </tr>
</table>