Toggle table column group visibility

Alex Feldman April 17, 2014

I'd like to have a table where columns can be grouped with some meta attribute and their visibility toggled with buttons/checkboxes above the table. For example:

=============

[Button A] [Button B]

------------------

Col 0 (Fixed) | Col 1 (A) | Col 2 (A) | Col 3 (B) | Col 4 (B) | Col 5 (B)

=============

In the example above, Column 0 is fixed and always visible. Toggling Button A would hide/show Columns 1 and 2, and togling Button B would hide/show Columns 3,4,5.

What's the best way to achieve this?

1 answer

1 accepted

0 votes
Answer accepted
Alex Feldman April 18, 2014

I've come up with this javascript solution which works well. Only problem is that all tables on the page will toggle. Unfortunately Confluence is stripping any attributes that I assign to elements, so selecting unique items on the page is a little difficult at the moment. I'd love to hear solutions for this.

I added the following code to an HTML Macro:

<input type="checkbox" checked="true" onclick="toggleColumns(this.checked, businessColumns)">Business Columns</input>
<input type="checkbox" checked="true" onclick="toggleColumns(this.checked, technicalColumns)">Technical Columns</input>
 
<script type="text/javascript">
  var businessColumns = [2,3];
  var technicalColumns = [4,5];
 
  function toggleColumns(show, columns){
    var $tapps = AJS.$("table");

    for (var i = 0; i < columns.length; i++) {
      if(show){
         $tapps.find('td:nth-child(' + columns[i] + '),th:nth-child(' + columns[i] + ')').show();
      }else{
         $tapps.find('td:nth-child(' + columns[i] + '),th:nth-child(' + columns[i] + ')').hide();
      }
    }
  }
</script>

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events