How to make use of it:

1. Load the stylesheet sheetjs.css and JavaScript sheetjs.js within the HTML doc.

<!-- jQuery Is Required -->
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- sheetjs plugin -->
<link rel="stylesheet" href="sheetjs.css" />
<script src="sheetjs.js"></script>

2. Just add the CSS class sheetjs to your HTML table and the plugin will handle the remaining.

<table class="sheetjs">
  <caption>List of countries by population (United Nations)</caption>
  <thead>
    <tr>
      <th rowspan="2">NO</th>
      <th rowspan="2">Country/Territory</th>
      <th rowspan="2">UN continental<br>region</th>
      <th rowspan="2">UN statistical<br>subregion</th>
      <th colspan="2">Population</th>
      <th rowspan="2">Change</th>
    </tr>
    <tr>
      <th>1 July 2018</th>
      <th>1 July 2019</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>China</td>
      <td>Asia</td>
      <td>Eastern Asia</td>
      <td align="right">1,427,647,786</td>
      <td align="right">1,433,783,686</td>
      <td align="right">0.43%</td>
    </tr>
    <tr>
      <th>2</th>
      <td>India</td>
      <td>Asia</td>
      <td>Southern Asia</td>
      <td align="right">1,352,642,280</td>
      <td align="right">1,366,417,754</td>
      <td align="right">1.02%</td>
    </tr>
    <tr>
      <th>3</th>
      <td>United States</td>
      <td>Americas</td>
      <td>Northern America</td>
      <td align="right">327,096,265</td>
      <td align="right">329,064,917</td>
      <td align="right">0.60%</td>
    </tr>
    ...
  </tbody>
  <tfoot>
    <tr>
      <th></th>
      <td>World</td>
      <td></td>
      <td></td>
      <td>7,631,091,040</td>
      <td>7,713,468,100</td>
      <td>+1.08%
      </td>
    </tr>
  </tfoot>
</table>

Specifications

• Prerequisites

  • Table tag is complete. Use thead, tbody, tfoot and caption properly.
  • Works on both IE7 and Chrome.

• Functions

  • Cell selection
    • Click the cell to select it.
    • Click with Shift-key, the rectangle will be sekected.
    • If another area is selected, the selection will be removed.
  • Line selection
    • Click ‘th’ at the beginning of a line in tbody, you can also select a ractangle by selectiong the line
    • Clicking on other element on th is not work
  • Column selection
    • Click on a colum ‘thead th’ to select all the columns with thead, tbody and tfoot.
    • ‘th’ only. ‘td’ does not react.
  • Value copy
    • Selecting cell text can be copy into your clipboard with Copy command, ‘Ctrl + c’ or right-click.
    • The copied value is in TSV (tab separated) text format and can be pasted into Excel as it is.
    • The text does not include INPUT or A tag link information. Extract only pure text
  • Filter
    • Select a cell and right-click to Filter to filter the entire table with the selected value
  • Line count display
    • The number of displayed tbody columns is automatically counted and displayed on the screen. If you have declared a caption tag.
  • Total value display
    • Sum the value of the selected cell and display it. If you have declared a caption tag.
    • Take out what looks like a number and add it up. For example, if you select 1,000 yen and A-100, 1000+ (-100) will be 900.
  • Header fixed
    • Follow only the header title as the window scrolls

• Functional restrictions in IE

  • Header fixed
  • No icons in IE7

Convert HTML Table Into Spreadsheet, sheetjs Plugin/Github, export html table to xlsx using javascript, export html table to excel with formatting, html table to excel javascript, convert html table to excel

See Demo And Download