title: Table2excel plugin does not work
body: <p>I am working on a dashboard app and I would like to implement "download table as .xls" feature.</p>
  
  <p>On this link you can see how the table looks like
  <a href="http://pasteboard.co/p82eqze.png" rel="nofollow noreferrer">dashboard</a></p>
  
  <p>I have found a <a href="https://github.com/rainabba/jquery-table2excel" rel="nofollow noreferrer">library</a> which also includes the tutorial that explains the set up. As you can see in the code below I have done more or less everything like it was explained. However it does not work and for some reason the table will not be exported.</p>
  
  <p>As you can see, I have included <code>jquery.table2excel.js</code> in the resources together with all other resources which are used for this page. I have also checked if the <code>.js</code> file is available after the page is loaded and it also looks good.</p>
  
  <p>I have also tried this</p>
  
  <pre><code>    $(function () {
              document.getElementById('btnExport').addEventListener("click", function () {
                  document.getElementById('myTable').table2excel({
                      exclude: ".noExl",
                      name: "Excel Document Name",
                      filename: "myFileName"
                  });
              });
          });
  </code></pre>
  
  <p>but it also does not look well and when I execute the function I get this message in the debugg console </p>
  
  <p><code>TypeError: document.getElementById(...).table2excel is not a function</code></p>
  
  <p>This is how my <code>index.jsp</code> looks like at the moment</p>
  
  <pre><code>&lt;%@page contentType="text/html" pageEncoding="UTF-8"%&gt;
  &lt;%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%&gt;
  &lt;%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%&gt;
  &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd"&gt;
  
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;title&gt;KPI Admin&lt;/title&gt;
  
      &lt;link href="&lt;c:url value="/resources/css/bootstrap.min.css" /&gt;" rel="stylesheet"&gt;
      &lt;link href="&lt;c:url value="/resources/css/addition.css" /&gt;" rel="stylesheet"&gt;
      &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /&gt;
  
      &lt;script src="&lt;c:url value="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" /&gt;"&gt;&lt;/script&gt;
      &lt;script src="&lt;c:url value="http://code.jquery.com/ui/1.9.2/jquery-ui.js" /&gt;"&gt;&lt;/script&gt;
      &lt;script src="&lt;c:url value="/resources/js/bootstrap.js" /&gt;"&gt;&lt;/script&gt;
      &lt;script src="&lt;c:url value="/resources/js/addition.js" /&gt;"&gt;&lt;/script&gt;
      &lt;script src="&lt;c:url value="/resources/js/jquery.table2excel.js" /&gt;"&gt;&lt;/script&gt;
      &lt;script&gt;
          $(function () {
              document.getElementById('btnExport').addEventListener("click", function () {
                  $(".table2excel").table2excel({
                      exclude: ".noExl",
                      name: "Excel Document Name",
                      filename: "myFileName"
                  });
              });
          });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;nav class="navbar navbar-inverse navbar-fixed-top"&gt;
      &lt;!-- /.nav --&gt;
  &lt;/nav&gt;
  
  &lt;div class="container"&gt;
      &lt;div class="starter-template"&gt;
  
          &lt;ul class="nav nav-tabs"&gt;
              &lt;!-- /.tabs --&gt;
          &lt;/ul&gt;
  
          &lt;!-- Tab panes --&gt;
          &lt;div class="tab-content"&gt;
              &lt;div class="tab-pane fade in active" id="A"&gt;
                  &lt;form:form action="/KPIAdmin/kpis" method="get"&gt;
  
  
                      &lt;div class="row form-inline"&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label for="date"&gt;Date&lt;/label&gt;
                              &lt;input id="startDatePicker" type="text" class="form-control" name="date" value="${date}" &gt;
                          &lt;/div&gt;
                          &lt;button type="submit" class="btn btn-default"&gt;Submit&lt;/button&gt;             
                      &lt;/div&gt;
                      &lt;br&gt;
  
                      &lt;div class="table-responsive"&gt;            
                          &lt;table id="myTable" class="table table-bordered table2excel"&gt;
                              &lt;thead&gt;
                                  &lt;tr&gt;
                                      &lt;td&gt;Name&lt;/td&gt;
                                      &lt;td&gt;Last import&lt;/td&gt;
                                      &lt;td&gt;Last value&lt;/td&gt;
                                      &lt;td colspan="4"&gt;Values&lt;/td&gt;
                                      &lt;td colspan="3"&gt;Targets&lt;/td&gt;
                                      &lt;td colspan="3"&gt;Score&lt;/td&gt;
                                      &lt;td&gt;Action&lt;/td&gt;
                                  &lt;/tr&gt;
                              &lt;/thead&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;&lt;/td&gt;
                                  &lt;td&gt;&lt;/td&gt;
                                  &lt;td&gt;&lt;/td&gt;
                                  &lt;td class="text-center" style="font-weight: 700;"&gt;DTD&lt;/td&gt;
                                  &lt;td class="text-center" style="font-weight: 700;"&gt;WTD&lt;/td&gt;
                                  &lt;td class="text-center" style="font-weight: 700;"&gt;MTD&lt;/td&gt;
                                  &lt;td class="text-center" style="font-weight: 700;"&gt;YTD&lt;/td&gt;
                                  &lt;td class="text-center" style="font-weight: 700;"&gt;0&lt;/td&gt;
                                  &lt;td class="text-center" style="font-weight: 700;"&gt;100&lt;/td&gt;
                                  &lt;td class="text-center" style="font-weight: 700;"&gt;150&lt;/td&gt;
                                  &lt;td class="text-center" style="font-weight: 700;"&gt;WTD&lt;/td&gt;
                                  &lt;td class="text-center" style="font-weight: 700;"&gt;MTD&lt;/td&gt;
                                  &lt;td class="text-center" style="font-weight: 700;"&gt;YTD&lt;/td&gt;
                                  &lt;td&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;c:forEach var="row" items="${rows}" varStatus="loop"&gt;
                                  &lt;!-- /.loop that creates the table --&gt;
                              &lt;/c:forEach&gt;
                              &lt;tr&gt;
                                  &lt;!-- /. last row mean --&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;
                      &lt;/div&gt;
  
                  &lt;/form:form&gt;
                  &lt;button id="btnExport" class="btn btn-default"&gt;Export as .xls&lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="tab-pane fade" id="B"&gt; &lt;!-- Content inside tab B --&gt; &lt;/div&gt;
              &lt;div class="tab-pane fade" id="C"&gt; &lt;!-- Content inside tab C --&gt; &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;    
  &lt;/div&gt;&lt;!-- /.container --&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>I am realy not sure what could cause this problem or do I have an error in the jQuery syntax. It could be also that the lib is not inportet correctly within <code>.jsp</code> page but this is the way which was working for me in the past. I guess that I am using right <code>jQuery</code> version since <code>jQuery datePicker</code> works fine.</p>
  
  <p>If you are able to see what could case this issue, please help me to fix it. If you have any better idea how to export a table as an excel file please suggest.</p>
  
  <p>Thx in advance.</p>
  
  <p><strong>Edit 1:</strong></p>
  
  <p>I have changed the function and it looks like the code I have posted below. If I execute <code>console.log("exporting...");</code> before or after <code>$(".table2excel").table2excel({ ... });</code> "exporing..." will be printed out in the console. Obviously that excludes jQuery as a potential cause of the problem.</p>
  
  <pre><code>&lt;script&gt;
          $(function () {
              $('#btnExport').click(function () {
                  console.log("exporting...");
                  $(".table2excel").table2excel({
                      exclude: ".noExl",
                      name: "Excel Document Name",
                      filename: "myFileName"
                  });    
              });
          });
      &lt;/script&gt;
  </code></pre>
  
  <p><strong>Edit 2:</strong></p>
  
  <p>Since I was not able to fix this, I have tried to try something new. I have found <a href="https://stackoverflow.com/questions/22317951/export-html-table-data-to-excel-using-javascript-jquery-is-not-working-properl">this</a> solutions and it works but still not as I would really like to, so I hope that you can help me to improve it.</p>
  
  <p>My table looks like this
  <img src="https://i.stack.imgur.com/dzXeO.png" alt="Table in html"></p>
  
  <p>and this is what I get as a result
  <img src="https://i.stack.imgur.com/Ee5nT.png" alt="Table in excel"></p>
  
  <p>First of all it really looks strange without excel grid, do you have an Idea why the file is exported without it and how can I add it?</p>
  
  <p>Second I would like to remove the column after YTD where the additional infos are presented. Is it somehow possible to adjust the <code>tab_text.replace(...)</code> below in order to achive this</p>
  
  <p>in html it looks like this</p>
  
  <pre><code>&lt;/td&gt;&lt;td width='20px'&gt;
      &lt;a class='infobox' href=''&gt; 
          &lt;img src='img/info.jpg' alt='info' width='18' height='18'&gt;
          &lt;span&gt; Service Engineer: ... &lt;br&gt;
                 Datasource: ...
          &lt;/span&gt;
      &lt;/a&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>JavaScript function looks like this</p>
  
  <pre><code>function exportExcelReport(tblId) {
      var tab_text = "&lt;table border='2px'&gt;&lt;tr&gt;";
      var table = document.getElementById(tblId);
  
      var style;
      for (var j = 0; j &lt; table.rows.length; j++) {
          style = table.rows[j].className.split(" ");
          if (style.length &lt; 2)
          tab_text = tab_text + table.rows[j].innerHTML + "&lt;/tr&gt;";
      }
  
      tab_text = tab_text + "&lt;/table&gt;";
      tab_text = tab_text.replace(/&lt;a[^&gt;]*&gt;|&lt;\/a&gt;/g, "");
      tab_text = tab_text.replace(/&lt;img[^&gt;]*&gt;/gi, "");
      tab_text = tab_text.replace(/&lt;input[^&gt;]*&gt;|&lt;\/input&gt;/gi, "");
  
      return window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));
  }
  </code></pre>
  
  <p>Thx!</p>