'How html table converted to excel with cell comment in javascrip

How html table converted to excel with cell comment in javascrip like this? https://i.stack.imgur.com/R4jAy.png

from this script I can export html to excel by bringing the css color, but I want to bring the detailed value in the form of a note.

sorry for my language

<table id="testTable" rules="groups">
  <thead valign="top">
      <tr>
          <th style="vertical-align: middle; min-width: 250px;" rowspan="2">Employee</th>
          <th colspan="2">Su 1</th>
          <th colspan="2">Mo 2</th>
          <th colspan="2">Tu 3</th>
          <th colspan="2">We 4</th>
          <th colspan="2">Th 5</th>
      </tr>
      <tr>
        <?php for ($i=0; $i < 5; $i++) : ?>
          <th>IN</th>
          <th>Out</th>
        <?php endfor; ?>
      </tr>
  </thead>
  <tbody>
    <tr class="grub-line">
      <td>Group A</td>
      <td colspan="14"></td>
    </tr>
    <tr>
      <td>&nbsp; Name Employee A</td>

      <td class="tp-A">10:00</td>
      <td class="tp-A">15:00</td>
      <td class="tp-DO" colspan="2">DO</td>
      <td class="tp-AL" colspan="4">AL</td>
      <td class="tp-HL" colspan="2">H</td>
    </tr>

    <tr>
      <td>&nbsp; Name Employee B</td>
      <td class="tp-DO" colspan="2">DO</td>
      <td class="tp-A">10:00</td>
      <td class="tp-A">15:00</td>
      <td class="tp-A">10:00</td>
      <td class="tp-A">15:00</td>
      <td class="tp-A">10:00</td>
      <td class="tp-A">15:00</td>
      <td class="tp-A">10:00</td>
      <td class="tp-A">15:00</td>
    </tr>
  </tbody>
</table>

this is javascript for convert

<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  <script type="text/javascript">
      var tableToExcel = (function () {
          // Define your style class template.
          var style = "<style>"+
                        "table { font-family: sans-serif; }"+
                        "table thead tr:nth-child(2) th { min-width: 60px; }"+
                        "table, th, td { border: 0.5pt solid #000; }"+
                        "table thead tr th { background-color: #267db3; color: #FFF; }"+
                        ".tp-A { background-color: #61fd61; color: #000; text-align:center; vertical-align: middle; }"+
                        ".tp-DO { background-color: #47bdef; color: #FFF; text-align:center; vertical-align: middle; }"+
                        ".tp-AL { background-color: #f09f4c; color: #FFF; text-align:center; vertical-align: middle; }"+
                        ".tp-HL { background-color: #f0b2b2; color: #cb3d3d; text-align:center; vertical-align: middle; }"+
                        ".grub-line { background-color: #cdcdcd; color: #000; }"+
                      "</style>";
          var uri = 'data:application/vnd.ms-excel;base64,'
              , template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->' + style + '</head><body><table>{table}</table></body></html>'
              , base64 = function (s) {
                  return window.btoa(unescape(encodeURIComponent(s)))
              }
              , format = function (s, c) {
                  return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; })
              }
          return function (table, name) {
              if (!table.nodeType) table = document.getElementById(table)
              var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML }
              window.location.href = uri + base64(format(template, ctx))
          }
      })()
  </script>

what do i need to add in this script?

javascripthtml


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions