テーブル行の表示スタイルをヘッダと整列させたままにする

Question

テーブルがあり、javascriptを使用しています。表示スタイルをnoneにしてテーブルからテーブル行を削除するオプションをユーザに与えます。 ユーザーが行をもう一度見たい場合は、表示スタイルをnoneから離して配置する必要があります。私の問題は、使用するスタイルがわからないことです。私はテーブルの行グループが最も賢明であると思ったが、それは行を台無しに... 私はここにフィドルを作成し、

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またはその両方を試してください。

Answer 2

まず、読みやすくするために、他のコミュニティと共有するときに、より簡潔なヘッダーを作成してみましょう（これは大きな問題ではないことは理解していますが）。私は自分自身をそれを考え出し

visibility:hidden 

Answer 3

---

私がしようとするだろう...正しい表示スタイルは私のために正常に動作します

el[i].style.display = ''; 

が カール