jQuery 通过下拉选择中的几列过滤表答案

【问题标题】：jQuery filter table by several columns from a dropdown selectionjQuery 通过下拉选择中的几列过滤表
【发布时间】：2017-09-09 01:49:33
【问题描述】：

我正在寻找一种方法，通过从下拉列表中选择的两列来过滤表格。第一个过滤器工作得很好，但是，第二个过滤器不起作用。我设法隐藏了包含选定值的列，但我需要隐藏所有不包含该值的列。我无法让: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，因此我无法使用它。

提前致谢。

【问题讨论】：

jQuery "not contains" selector的可能重复

标签： javascript jquery html html-table filtering

【解决方案1】：

你可以使用:not pseudolike

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

但请注意，它匹配 Stable 和 unstable 等子字符串。如果文本与第二个过滤器的第二列匹配，只需循环查找

sn-p 下面

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

【讨论】：

【解决方案2】：

更好地使用 class 进行过滤。

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>

【讨论】：

这实际上好一点，因为它用 colspan 隐藏了字幕行。但是，这需要向 HTML 添加额外的类，并且我将在大量相似格式的表格上使用该 js，因此我不会使用它。不过还是很有帮助的，谢谢。