来自下拉列表选择

Question

我正在寻找一种方法，可以从下拉列表中选择两列来过滤掉表格。第一个过滤器工作正常，但第二个过滤器不起作用。我设法隐藏包含所选值的列，但我需要隐藏所有不包含该值的列。我无法让:not(:contains工作，当我添加它时，它只是隐藏了一切，包括我需要留下的价值。

以下是隐藏所有行的示例（按“方向”排序时）：https://jsfiddle.net/4m82w917/ 以下是我当前的表格布局和代码隐藏我需要的示例：

$(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>

我正在考虑使用:visible创建一个可见行数组，然后过滤掉我不需要的行，但我不确定应该如何管理选择器。

我想使用Datatables来实现这个目的，但它不适用于colspan，所以我不能使用它。

提前致谢。

Answer 1

您可以使用:not pseudo之类的

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

但要警告它匹配像Stable和unstable这样的子字符串..如果文本与第二个过滤器的第二列匹配，则只需遍历查找

下面的代码段

$(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>

Answer 2

更好地使用类进行过滤。

HTML代码

 $('#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>