javascript - 表格行的显示样式与标题保持对齐

Question

我有一个表格，我使用 javascript 为用户提供了通过将显示样式设置为无来从表格中删除表格行的选项。如果用户想再次看到这些行，我需要将显示样式从无中移开，我的问题是我不知道使用什么样式。我认为 table-row-group 是最明智的，但它弄乱了行......我在这里创建了一个 fiddle 并复制了下面的代码

https://jsfiddle.net/b2s3dpo5/#&togetherjs=7EwfsBJIfw

<fieldset style="display: inline-block;">
  <div style="display: inline-block;">
    <input type="checkbox" name="{{ category.name }}" id="category" checked> remove rows&nbsp;&nbsp;&nbsp;
  </div>
</fieldset>

<div class="panel panel-default col-xs-12">
<table class="table table-striped">
<thead>
  <tr>
    <th><strong>ID</strong></th>
    <th><strong>test test test</strong></th>
    <th><strong>Institute/Organisation</strong></th>
    <th><strong>test deadline test</strong></th>
  </tr>
</thead>
<tbody>
  <tr class="category">
    <th class="col-xs-1" scope="row">
      test
    </th>
    <td class="col-xs-5">
      test
    </td>
    <td class="col-xs-4">
      test
    </td>
    <td class="col-xs-2">
      test
    </td>
  </tr>
</tbody>
</table>
</div>

和必要的javascript

document.getElementById('category').onclick = function() {
  toggleSub_by_class(this, 'category');
};

function toggleSub_by_class(box, select_class) {
// get reference to related content to display/hide
 var el = document.getElementsByClassName(select_class);
 var flag;

 if (box.checked) {
   for (var i = 0, j = el.length; i < j; i++) {
     el[i].style.display = 'table-row-group';
   }
 } else {
   for (var i = 0, j = el.length; i < j; i++) {
     var classList = el[i].className.split(' ')
     flag = 0
     for (var h = 0, k = classList.length; h < k; h++) {
       if (document.getElementById(classList[h])) {
         if (document.getElementById(classList[h]).checked) {
           flag = 1
         }
       }
     }
     if (flag == 0) {
       el[i].style.display = 'none';
     }
   }
 }
}   

Answer 1

尝试 visibility:hidden 或 height:0px 或两者兼而有之。