0

I'm looking for a way to filter out a table by two columns selected from a dropdown list. The first filter works just fine, however, the second ones does not work. I managed to hide the column that contains a selected value, but I need to hide all the columns that do not contain that value. I can't get :not(:contains to work, when I add it, it just hides everything including the value I need to stay.

Here is an example of how it hides all the rows (when sorting by "Direction"): https://jsfiddle.net/4m82w917/ Here is an example of my current table layout and code that hides what I need:

$(function() {
  $('#butt1').click(function() {
    var filter2 = $('#selector2').val();
    $("#test td.col1").parent().show();
    if ($('#selector1').val() !== "all") {
      $("#test td.col1:contains('" + $('#selector1').val() + "')").parent().show().siblings().hide();
      $("#test td.col1:contains('" + $('#selector1').val() + "')").parent().show();
    }
    if ($('#selector2').val() !== "all") {
      $("#test tr td.col1:contains('" + $('#selector2').val() + "')").parent().hide();
    }
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Asset:<br>
<select id="selector1"><option value="all">All</option><option value="Data-set 2
">Data-set 2</option><option value="Data-set 1
">Data-set 1</option><option value="Data-set 4
">Data-set 4</option></select><br> Direction:

<br>
<select id="selector2"><option value="all">All</option><option value="Stable
">Stable</option><option value="Unstable, aprox.">Unstable, aprox.</option><option value="Straight">Straight</option><option value="Curved">Curved</option><option value="Padded">Padded</option><option value="Straight">Straight</option><option value="Falling">Falling</option><option value="Uprising">Uprising</option></select><br>
<button id="butt1">Select</button><br><br>

<table id="test" class="TableStyle0" border="1" cellspacing="0" cellpadding="0">
  <thead>
    <tr>
      <th width="90">
        <p style="text-align: center;"><strong>Code</strong></p>
      </th>
      <th style="text-align: center;" width="203">
        <p><strong>Direction</strong></p>
      </th>
      <th style="text-align: center;" width="136">
        <p><strong>Asset</strong></p>
      </th>
      <th style="text-align: center;" width="98">
        <p><strong>Form</strong></p>
      </th>
      <th style="text-align: center;" width="91">
        <p><strong>Quota</strong></p>
      </th>
      <th style="text-align: center;" width="98">
        <p><strong>Target</strong></p>
      </th>
      <th style="text-align: center;" width="98">
        <p><strong>General</strong></p>
      </th>
      <th style="text-align: center;" width="98">
        <p><strong>Total</strong></p>
      </th>
      <th style="text-align: center;" width="81">
        <p><strong>Stated</strong></p>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="col1" colspan="9" valign="bottom" width="992">
        <p style="text-align: center;"><strong>Data-set 2</strong></p>
      </td>
    </tr>
    <tr>
      <td class="col1" valign="bottom" width="90">
        <p>38.03.02</p>
      </td>
      <td class="col1" valign="bottom" width="203">
        <p>Stable</p>
      </td>
      <td class="col1" valign="bottom" width="136">
        <p>Data-set 2</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>Visible</p>
      </td>
      <td class="col1" valign="bottom" width="91">
        <p>1</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>&nbsp;</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>4</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>5</p>
      </td>
      <td class="col1" valign="bottom" width="81">
        <p>60</p>
      </td>
    </tr>
    <tr>
      <td class="col1" valign="bottom" width="90">
        <p>38.03.02</p>
      </td>
      <td class="col1" valign="bottom" width="203">
        <p>Unstable, aprox.</p>
      </td>
      <td class="col1" valign="bottom" width="136">
        <p>Data-set 2</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>Visible</p>
      </td>
      <td class="col1" valign="bottom" width="91">
        <p>&nbsp;</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>&nbsp;</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>&nbsp;</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>&nbsp;</p>
      </td>
      <td class="col1" valign="bottom" width="81">
        <p>25</p>
      </td>
    </tr>
    <tr>
      <td class="col1" colspan="9" valign="bottom" width="992">
        <p style="text-align: center;"><strong>Data-set 1</strong></p>
      </td>
    </tr>
    <tr>
      <td class="col1" valign="bottom" width="90">
        <p>05.03.06</p>
      </td>
      <td class="col1" valign="bottom" width="203">
        <p>Straight</p>
      </td>
      <td class="col1" valign="bottom" width="136">
        <p>Data-set 1</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>Visible</p>
      </td>
      <td class="col1" valign="bottom" width="91">
        <p>2</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>&nbsp;</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>12</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>14</p>
      </td>
      <td class="col1" valign="bottom" width="81">
        <p>5</p>
      </td>
    </tr>
    <tr>
      <td class="col1" width="90">
        <p>06.03.01</p>
      </td>
      <td class="col1" width="203">
        <p>Curved</p>
      </td>
      <td class="col1" width="136">
        <p>Data-set 1</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>Invivible</p>
      </td>
      <td class="col1" valign="bottom" width="91">
        <p>7</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>&nbsp;</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>63</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>70</p>
      </td>
      <td class="col1" valign="bottom" width="81">
        <p>5</p>
      </td>
    </tr>
    <tr>
      <td class="col1" width="90">
        <p>06.03.01</p>
      </td>
      <td class="col1" width="203">
        <p>Padded</p>
      </td>
      <td class="col1" width="136">
        <p>Data-set 1</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>Slightly vivible</p>
      </td>
      <td class="col1" valign="bottom" width="91">
        <p>1</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>&nbsp;</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>9</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>10</p>
      </td>
      <td class="col1" valign="bottom" width="81">
        <p>5</p>
      </td>
    </tr>
    <tr>
      <td class="col1" valign="bottom" width="90">
        <p>06.03.02</p>
      </td>
      <td class="col1" valign="bottom" width="203">
        <p>Falling</p>
      </td>
      <td class="col1" valign="bottom" width="136">
        <p>Data-set 1</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>Visible</p>
      </td>
      <td class="col1" valign="bottom" width="91">
        <p>2</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>&nbsp;</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>18</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>20</p>
      </td>
      <td class="col1" valign="bottom" width="81">
        <p>5</p>
      </td>
    </tr>
    <tr>
      <td class="col1" colspan="9" valign="bottom" width="992">
        <p style="text-align: center;"><strong>Data-set 4</strong></p>
      </td>
    </tr>
    <tr>
      <td class="col1" valign="bottom" width="90">
        <p>05.03.02</p>
      </td>
      <td class="col1" valign="bottom" width="203">
        <p>Uprising</p>
      </td>
      <td class="col1" valign="bottom" width="136">
        <p>Data-set 4</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>Invisible</p>
      </td>
      <td class="col1" valign="bottom" width="91">
        <p>3</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>&nbsp;</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>22</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>25</p>
      </td>
      <td class="col1" valign="bottom" width="81">
        <p>5</p>
      </td>
    </tr>
    <tr>
    </tr>
  </tbody>
</table>

I'm thinking of making an array of visible rows with :visible and then filter out rows I don't need, but I'm not sure how I should manage the selector.

I fould out the way to do this using Datatables, but it does not work with colspan so I can't use it.

Thanks in advance.

mkrl
  • 740
  • 6
  • 20
  • Possible duplicate of [jQuery "not contains" selector](http://stackoverflow.com/questions/20062085/jquery-not-contains-selector) – Andreas Apr 13 '17 at 05:03

2 Answers2

2

You can use the :not pseudo like 

$("#test tr td.col1:not(:contains('" + $('#selector2').val() + "'))").parent().hide();

but be warned it matched substrings like Stable and unstable.. simply loop through the find if the text matches the second column for the second filter

snippet below

$(function() {
  $('#butt1').click(function() {
    var filter2 = $('#selector2').val();
    $("#test td.col1").parent().show();

    if ($('#selector1').val() !== "all") {
      $("#test td.col1:contains('" + $('#selector1').val() + "')").parent().show().siblings().hide();
      $("#test td.col1:contains('" + $('#selector1').val() + "')").parent().show();
    }
    if ($('#selector2').val() !== "all") {
      $("#test tr .col1:nth-child(2)").each(function() {
        //        console.log('"' + $(this).text() + '"', '"' + $('#selector2').val() + '"');
        if ($(this).text().trim() != $('#selector2').val().trim()) {
          $(this).parent().hide();
        }
      }) //each
    }
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Asset:<br>
<select id="selector1"><option value="all">All</option><option value="Data-set 2
">Data-set 2</option><option value="Data-set 1
">Data-set 1</option><option value="Data-set 4
">Data-set 4</option></select><br> Direction:

<br>
<select id="selector2"><option value="all">All</option><option value="Stable
">Stable</option><option value="Unstable, aprox.">Unstable, aprox.</option><option value="Straight">Straight</option><option value="Curved">Curved</option><option value="Padded">Padded</option><option value="Straight">Straight</option><option value="Falling">Falling</option><option value="Uprising">Uprising</option></select><br>
<button id="butt1">Select</button><br><br>

<table id="test" class="TableStyle0" border="1" cellspacing="0" cellpadding="0">
  <thead>
    <tr>
      <th width="90">
        <p style="text-align: center;"><strong>Code</strong></p>
      </th>
      <th style="text-align: center;" width="203">
        <p><strong>Direction</strong></p>
      </th>
      <th style="text-align: center;" width="136">
        <p><strong>Asset</strong></p>
      </th>
      <th style="text-align: center;" width="98">
        <p><strong>Form</strong></p>
      </th>
      <th style="text-align: center;" width="91">
        <p><strong>Quota</strong></p>
      </th>
      <th style="text-align: center;" width="98">
        <p><strong>Target</strong></p>
      </th>
      <th style="text-align: center;" width="98">
        <p><strong>General</strong></p>
      </th>
      <th style="text-align: center;" width="98">
        <p><strong>Total</strong></p>
      </th>
      <th style="text-align: center;" width="81">
        <p><strong>Stated</strong></p>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="col1" colspan="9" valign="bottom" width="992">
        <p style="text-align: center;"><strong>Data-set 2</strong></p>
      </td>
    </tr>
    <tr>
      <td class="col1" valign="bottom" width="90">
        <p>38.03.02</p>
      </td>
      <td class="col1" valign="bottom" width="203">
        <p>Stable</p>
      </td>
      <td class="col1" valign="bottom" width="136">
        <p>Data-set 2</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>Visible</p>
      </td>
      <td class="col1" valign="bottom" width="91">
        <p>1</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>&nbsp;</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>4</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>5</p>
      </td>
      <td class="col1" valign="bottom" width="81">
        <p>60</p>
      </td>
    </tr>
    <tr>
      <td class="col1" valign="bottom" width="90">
        <p>38.03.02</p>
      </td>
      <td class="col1" valign="bottom" width="203">
        <p>Unstable, aprox.</p>
      </td>
      <td class="col1" valign="bottom" width="136">
        <p>Data-set 2</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>Visible</p>
      </td>
      <td class="col1" valign="bottom" width="91">
        <p>&nbsp;</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>&nbsp;</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>&nbsp;</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>&nbsp;</p>
      </td>
      <td class="col1" valign="bottom" width="81">
        <p>25</p>
      </td>
    </tr>
    <tr>
      <td class="col1" colspan="9" valign="bottom" width="992">
        <p style="text-align: center;"><strong>Data-set 1</strong></p>
      </td>
    </tr>
    <tr>
      <td class="col1" valign="bottom" width="90">
        <p>05.03.06</p>
      </td>
      <td class="col1" valign="bottom" width="203">
        <p>Straight</p>
      </td>
      <td class="col1" valign="bottom" width="136">
        <p>Data-set 1</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>Visible</p>
      </td>
      <td class="col1" valign="bottom" width="91">
        <p>2</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>&nbsp;</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>12</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>14</p>
      </td>
      <td class="col1" valign="bottom" width="81">
        <p>5</p>
      </td>
    </tr>
    <tr>
      <td class="col1" width="90">
        <p>06.03.01</p>
      </td>
      <td class="col1" width="203">
        <p>Curved</p>
      </td>
      <td class="col1" width="136">
        <p>Data-set 1</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>Invivible</p>
      </td>
      <td class="col1" valign="bottom" width="91">
        <p>7</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>&nbsp;</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>63</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>70</p>
      </td>
      <td class="col1" valign="bottom" width="81">
        <p>5</p>
      </td>
    </tr>
    <tr>
      <td class="col1" width="90">
        <p>06.03.01</p>
      </td>
      <td class="col1" width="203">
        <p>Padded</p>
      </td>
      <td class="col1" width="136">
        <p>Data-set 1</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>Slightly vivible</p>
      </td>
      <td class="col1" valign="bottom" width="91">
        <p>1</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>&nbsp;</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>9</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>10</p>
      </td>
      <td class="col1" valign="bottom" width="81">
        <p>5</p>
      </td>
    </tr>
    <tr>
      <td class="col1" valign="bottom" width="90">
        <p>06.03.02</p>
      </td>
      <td class="col1" valign="bottom" width="203">
        <p>Falling</p>
      </td>
      <td class="col1" valign="bottom" width="136">
        <p>Data-set 1</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>Visible</p>
      </td>
      <td class="col1" valign="bottom" width="91">
        <p>2</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>&nbsp;</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>18</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>20</p>
      </td>
      <td class="col1" valign="bottom" width="81">
        <p>5</p>
      </td>
    </tr>
    <tr>
      <td class="col1" colspan="9" valign="bottom" width="992">
        <p style="text-align: center;"><strong>Data-set 4</strong></p>
      </td>
    </tr>
    <tr>
      <td class="col1" valign="bottom" width="90">
        <p>05.03.02</p>
      </td>
      <td class="col1" valign="bottom" width="203">
        <p>Uprising</p>
      </td>
      <td class="col1" valign="bottom" width="136">
        <p>Data-set 4</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>Invisible</p>
      </td>
      <td class="col1" valign="bottom" width="91">
        <p>3</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>&nbsp;</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>22</p>
      </td>
      <td class="col1" valign="bottom" width="98">
        <p>25</p>
      </td>
      <td class="col1" valign="bottom" width="81">
        <p>5</p>
      </td>
    </tr>
    <tr>
    </tr>
  </tbody>
</table>
repzero
  • 8,254
  • 2
  • 18
  • 40
1

Better use from class for filter.

HTML code

 $('#butt1').click(function() {     
      var selector1_selectedValue = $("#selector1").val(); 
      var selector2_selectedValue = $("#selector2").val();
      var list_tr = selector1_selectedValue == 'all' ? $("tr") :  $('.'+selector1_selectedValue);
   // Filter selector 1
      $("tr").hide();
      list_tr.show();
      //Filter selector 2
      if(selector2_selectedValue == 'all')
      {
       list_tr.show();
      }
      else{
         list_tr.hide();
         $('.'+$("#selector2").val()).show();
         $('.'+$('.'+selector2_selectedValue).attr('class').split(' ')[0]+'-header').show();
      }
      //Show Headers
      $("tr th").parent().show();     
      $('.'+selector1_selectedValue+'-header').show();           
      
      
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Asset:<br>
<select id="selector1">
    <option value="all">All</option>
    <option value="Data-set-2">Data-set 2</option>
    <option value="Data-set-1">Data-set 1</option>
    <option value="Data-set-4">Data-set 4</option>
</select><br>

Direction:<br>
<select id="selector2">
    <option value="all">All</option>
    <option value="Stable">Stable</option>
    <option value="Unstable">Unstable, aprox.
    </option><option value="Straight">Straight</option>
    <option value="Curved">Curved</option>
    <option value="Padded">Padded</option>
    <option value="Straight">Straight</option>
    <option value="Falling">Falling</option>
    <option value="Uprising">Uprising</option>
</select><br>
<button id="butt1">Select</button><br><br>

<table id="test" class="TableStyle0" border="1" cellspacing="0" cellpadding="0">
    <thead>
        <tr>
            <th width="90">
                <p style="text-align: center;"><strong>Code</strong></p>
            </th>
            <th style="text-align: center;" width="203">
                <p><strong>Direction</strong></p>
            </th>
            <th style="text-align: center;" width="136">
                <p><strong>Asset</strong></p>
            </th>
            <th style="text-align: center;" width="98">
                <p><strong>Form</strong></p>
            </th>
            <th style="text-align: center;" width="91">
                <p><strong>Quota</strong></p>
            </th>
            <th style="text-align: center;" width="98">
                <p><strong>Target</strong></p>
            </th>
            <th style="text-align: center;" width="98">
                <p><strong>General</strong></p>
            </th>
            <th style="text-align: center;" width="98">
                <p><strong>Total</strong></p>
            </th>
            <th style="text-align: center;" width="81">
                <p><strong>Stated</strong></p>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr class="Data-set-2 Data-set-2-header">
            <td class="col1" colspan="9" valign="bottom" width="992">
                <p style="text-align: center;"><strong>Data-set 2</strong></p>
            </td>
        </tr>
        <tr class="Data-set-2 Stable">
            <td class="col1" valign="bottom" width="90">
                <p>38.03.02</p>
            </td>
            <td class="col1" valign="bottom" width="203">
                <p>Stable</p>
            </td>
            <td class="col1" valign="bottom" width="136">
                <p>Data-set 2</p>
            </td>
            <td class="col1" valign="bottom" width="98">
                <p>Visible</p>
            </td>
            <td class="col1" valign="bottom" width="91">
                <p>1</p>
            </td>
            <td class="col1" valign="bottom" width="98">
                <p>&nbsp;</p>
            </td>
            <td class="col1" valign="bottom" width="98">
                <p>4</p>
            </td>
            <td class="col1" valign="bottom" width="98">
                <p>5</p>
            </td>
            <td class="col1" valign="bottom" width="81">
                <p>60</p>
            </td>
        </tr>
        <tr class="Data-set-2 Unstable">
            <td class="col1" valign="bottom" width="90">
                <p>38.03.02</p>
            </td>
            <td class="col1" valign="bottom" width="203">
                <p>Unstable, aprox.</p>
            </td>
            <td class="col1" valign="bottom" width="136">
                <p>Data-set 2</p>
            </td>
            <td class="col1" valign="bottom" width="98">
                <p>Visible</p>
            </td>
            <td class="col1" valign="bottom" width="91">
                <p>&nbsp;</p>
            </td>
            <td class="col1" valign="bottom" width="98">
                <p>&nbsp;</p>
            </td>
            <td class="col1" valign="bottom" width="98">
                <p>&nbsp;</p>
            </td>
            <td class="col1" valign="bottom" width="98">
                <p>&nbsp;</p>
            </td>
            <td class="col1" valign="bottom" width="81">
                <p>25</p>
            </td>
        </tr>
        <tr class="Data-set-1 Data-set-1-header">
            <td class="col1" colspan="9" valign="bottom" width="992">
                <p style="text-align: center;"><strong>Data-set 1</strong></p>
            </td>
        </tr>
        <tr class="Data-set-1 Straight">
            <td class="col1" valign="bottom" width="90">
                <p>05.03.06</p>
            </td>
            <td class="col1" valign="bottom" width="203">
                <p>Straight</p>
            </td>
            <td class="col1" valign="bottom" width="136">
                <p>Data-set 1</p>
            </td>
            <td class="col1" valign="bottom" width="98">
                <p>Visible</p>
            </td>
            <td class="col1" valign="bottom" width="91">
                <p>2</p>
            </td>
            <td class="col1" valign="bottom" width="98">
                <p>&nbsp;</p>
            </td>
            <td class="col1" valign="bottom" width="98">
                <p>12</p>
            </td>
            <td class="col1" valign="bottom" width="98">
                <p>14</p>
            </td>
            <td class="col1" valign="bottom" width="81">
                <p>5</p>
            </td>
        </tr>
        <tr class="Data-set-1 Curved">
            <td class="col1" width="90">
                <p>06.03.01</p>
            </td>
            <td class="col1" width="203">
                <p>Curved</p>
            </td>
            <td class="col1" width="136">
                <p>Data-set 1</p>
            </td>
            <td class="col1" valign="bottom" width="98">
                <p>Invivible</p>
            </td>
            <td class="col1" valign="bottom" width="91">
                <p>7</p>
            </td>
            <td class="col1" valign="bottom" width="98">
                <p>&nbsp;</p>
            </td>
            <td class="col1" valign="bottom" width="98">
                <p>63</p>
            </td>
            <td class="col1" valign="bottom" width="98">
                <p>70</p>
            </td>
            <td class="col1" valign="bottom" width="81">
                <p>5</p>
            </td>
        </tr>
        <tr class="Data-set-1 Padded">
            <td class="col1" width="90">
                <p>06.03.01</p>
            </td>
            <td class="col1" width="203">
                <p>Padded</p>
            </td>
            <td class="col1" width="136">
                <p>Data-set 1</p>
            </td>
            <td class="col1" valign="bottom" width="98">
                <p>Slightly vivible</p>
            </td>
            <td class="col1" valign="bottom" width="91">
                <p>1</p>
            </td>
            <td class="col1" valign="bottom" width="98">
                <p>&nbsp;</p>
            </td>
            <td class="col1" valign="bottom" width="98">
                <p>9</p>
            </td>
            <td class="col1" valign="bottom" width="98">
                <p>10</p>
            </td>
            <td class="col1" valign="bottom" width="81">
                <p>5</p>
            </td>
        </tr>
        <tr class="Data-set-1 Falling">
            <td class="col1" valign="bottom" width="90">
                <p>06.03.02</p>
            </td>
            <td class="col1" valign="bottom" width="203">
                <p>Falling</p>
            </td>
            <td class="col1" valign="bottom" width="136">
                <p>Data-set 1</p>
            </td>
            <td class="col1" valign="bottom" width="98">
                <p>Visible</p>
            </td>
            <td class="col1" valign="bottom" width="91">
                <p>2</p>
            </td>
            <td class="col1" valign="bottom" width="98">
                <p>&nbsp;</p>
            </td>
            <td class="col1" valign="bottom" width="98">
                <p>18</p>
            </td>
            <td class="col1" valign="bottom" width="98">
                <p>20</p>
            </td>
            <td class="col1" valign="bottom" width="81">
                <p>5</p>
            </td>
        </tr>
        <tr class="Data-set-4 Data-set-4-header">
            <td class="col1" colspan="9" valign="bottom" width="992">
                <p style="text-align: center;"><strong>Data-set 4</strong></p>
            </td>
        </tr>
        <tr class="Data-set-4 Uprising">
            <td class="col1" valign="bottom" width="90">
                <p>05.03.02</p>
            </td>
            <td class="col1" valign="bottom" width="203">
                <p>Uprising</p>
            </td>
            <td class="col1" valign="bottom" width="136">
                <p>Data-set 4</p>
            </td>
            <td class="col1" valign="bottom" width="98">
                <p>Invisible</p>
            </td>
            <td class="col1" valign="bottom" width="91">
                <p>3</p>
            </td>
            <td class="col1" valign="bottom" width="98">
                <p>&nbsp;</p>
            </td>
            <td class="col1" valign="bottom" width="98">
                <p>22</p>
            </td>
            <td class="col1" valign="bottom" width="98">
                <p>25</p>
            </td>
            <td class="col1" valign="bottom" width="81">
                <p>5</p>
            </td>
        </tr>
        <tr></tr>
    </tbody>
</table>
Saeed Ahmadian
  • 1,112
  • 1
  • 10
  • 21
  • This actually is a bit better since it hides the subtitle rows with colspan. However, this requires adding extra classes to HTML and I'm going to use that js on high amount of similary formatted tables so I'm not going to use it. Still very helpful though, thanks. – mkrl Apr 13 '17 at 07:55