title: Convert Excel sheet data to HTML with Javascript
body: <p>I'm using this js application found here: <a href="https://www.youtube.com/watch?v=u7R7yuQ6g9Y" rel="nofollow noreferrer">https://www.youtube.com/watch?v=u7R7yuQ6g9Y</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const excel_file = document.getElementById('excel_file');
  
  excel_file.addEventListener('change', (event) =&gt; {
  
        if (!['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-excel'].includes(event.target.files[0].type)) {
              document.getElementById('excel_data').innerHTML = '&lt;div class="alert alert-danger"&gt;Only .xlsx or .xls file format are allowed&lt;/div&gt;';
  
              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 &gt; 0) {
                    var table_output = '&lt;table class="listViewTable table-sortable" id="listViewTable"&gt;';
  
                    for (var row = 0; row &lt; sheet_data.length; row++) {
  
                          table_output += '&lt;tr class="ce1 colorYellow"&gt;';
  
                          for (var cell = 0; cell &lt; sheet_data[row].length; cell++) {
  
                                if (row == 0) {
  
                                      table_output += '&lt;th class="name1 hsText"&gt;' + sheet_data[row][cell] + '&lt;/th&gt;';
  
                                }
                                else {
  
                                      table_output += '&lt;td class="entry1 hsText"&gt;' + sheet_data[row][cell] + '&lt;/td&gt;';
  
                                }
  
                          }
  
                          table_output += '&lt;/tr&gt;';
  
                    }
  
                    table_output += '&lt;/table&gt;';
  
                    document.getElementById('excel_data').innerHTML = table_output;
              }
  
              excel_file.value = '';
  
        }
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;Convert Excel to HTML Table using JavaScript&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"&gt;
  
      &lt;script type="text/javascript" src="https://unpkg.com/xlsx@0.15.1/dist/xlsx.full.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;h2 class="text-center mt-4 mb-4"&gt;Convert Excel to HTML Table using JavaScript&lt;/h2&gt;
          &lt;div class="card"&gt;
              &lt;div class="card-header"&gt;&lt;b&gt;Select Excel File&lt;/b&gt;&lt;/div&gt;
              &lt;div class="card-body"&gt;
                  
                  &lt;input type="file" id="excel_file" /&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="excel_data" class="mt-5"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;script src="excel.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Here's what I need: Some columns need different styling. How can I get an output like this:</p>
  <pre><code>&lt;tr class=&quot;row-one&quot;&gt;
  &lt;td class=&quot;column-one-data-cell&quot;&gt;&lt;/td&gt;
  &lt;td class=&quot;column-two-data-cell&quot;&gt;&lt;/td&gt;
  &lt;td class=&quot;column-three-data-cell&quot;&gt;&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  <p>and in a different case something like:</p>
  <pre><code>&lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-md-4 col-sm-6 col-xs-4&quot;&gt;
      &lt;p class=&quot;amount&quot;&gt;content of column 2&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;col-md-8 col-sm-6 col-xs-8&quot;&gt;
      &lt;p class=&quot;unit&quot;&gt;content of column 3&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>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.</p>
  <p>Here are two examples for the desired output:</p>
  <p>#1: For HTML Table with different classes for different columns:</p>
  <div class="s-table-container">
  <table class="s-table">
  <thead>
  <tr>
  <th>table-th-c1</th>
  <th>table-th-c2</th>
  <th>table-th-c3</th>
  <th>table-th-c4</th>
  <th>table-th-c5</th>
  </tr>
  </thead>
  <tbody>
  <tr>
  <td>Column 1, class 1</td>
  <td>Column 2, class 2</td>
  <td>Column 3, class 3</td>
  <td>Column 4, class 4</td>
  <td>Column 5, class 5</td>
  </tr>
  <tr>
  <td>Column 1, class 1</td>
  <td>Column 2, class 2</td>
  <td>Column 3, class 3</td>
  <td>Column 4, class 4</td>
  <td>Column 5, class 5</td>
  </tr>
  <tr>
  <td>Column 1, class 1</td>
  <td>Column 2, class 2</td>
  <td>Column 3, class 3</td>
  <td>Column 4, class 4</td>
  <td>Column 5, class 5</td>
  </tr>
  <tr>
  <td>Column 1, class 1</td>
  <td>Column 2, class 2</td>
  <td>Column 3, class 3</td>
  <td>Column 4, class 4</td>
  <td>Column 5, class 5</td>
  </tr>
  </tbody>
  </table>
  </div>
  <p>#2: For the bootstrap grid system:</p>
  <div class="s-table-container">
  <table class="s-table">
  <thead>
  <tr>
  <th>table-th-c1</th>
  <th>table-th-c2</th>
  <th>table-th-c3</th>
  <th>table-th-c4</th>
  <th>table-th-c5</th>
  <th>Table-th-c6</th>
  </tr>
  </thead>
  <tbody>
  <tr>
  <td>Container 1, Row 1, Column 1</td>
  <td>Container 1, Row 2, Column 1</td>
  <td>Container 1, Row 2, Column 2</td>
  <td>Container 1, Row 3, Column 1</td>
  <td>Container 1, Row 3, Column 2</td>
  <td>Container 1, Row 3, Column 3</td>
  </tr>
  <tr>
  <td>Container 2, Row 1, Column 1</td>
  <td>Container 2, Row 2, Column 1</td>
  <td>Container 2, Row 2, Column 2</td>
  <td>Container 2, Row 3, Column 1</td>
  <td>Container 2, Row 3, Column 2</td>
  <td>Container 2, Row 3, Column 3</td>
  </tr>
  <tr>
  <td>Container 3, Row 1, Column 1</td>
  <td>Container 3, Row 2, Column 1</td>
  <td>Container 3, Row 2, Column 2</td>
  <td>Container 3, Row 3, Column 1</td>
  <td>Container 3, Row 3, Column 2</td>
  <td>Container 3, Row 3, Column 3</td>
  </tr>
  <tr>
  <td>Container 4, Row 1, Column 1</td>
  <td>Container 4, Row 2, Column 1</td>
  <td>Container 4, Row 2, Column 2</td>
  <td>Container 4, Row 3, Column 1</td>
  <td>Container 4, Row 3, Column 2</td>
  <td>Container 4, Row 3, Column 3</td>
  </tr>
  </tbody>
  </table>
  </div>
  <p>Thank you for your help; it is greatly appreciated!</p>