Append code (HTML + Javascript) to your tables

Sometimes you want to add some extra functionality to your ruleset that requires Javascript code. With the most recent versions of Tabulizer, this can be easily achieved by adding the required javascript code as file and prepending/appending any necessary HTML code using a simple table rule.

OK, let's see a specific example to illustrate this process more clearly. Let's assume that we want to add a toggle button that would show/hide the table. The resulting table should look like this:

Here is how to do it:

  1. Prepend the HTML code
    <div class="toggle_btn"><a id="toggle_label" href="javascript: showHideTable()">Hide Table</a></div><div id="toggle_container">
  2. Append the HTML code
  3. Save the javascript code in the file toggledisplay.js that you must add in the /template/tabulizer/js folder.
    function showHideTable() {
      var label_show = "Show Table";
      var label_hide = "Hide Table";
      var toggle_label = document.getElementById("toggle_label");
      var toggle_container = document.getElementById("toggle_container");
      if( != 'none') {
            toggle_label.innerHTML = label_show;
   = 'none';
      } else {
            toggle_label.innerHTML = label_hide;
   = 'block';   
  4. Add a new table rule to your existing ruleset with following settings:

If nothing happend when you click the toggle link, or you get a "showHideTable is not defined" reference error, just make sure the file path /template/tabulizer/js/toggledisplay.js exists.