tr 顯示或隱藏

 解決問題:如果要用前端控制tr的顯示或隱藏

  引用自下文參考，擷取文字記錄

  

方法1.

   //隱藏後頁面位置被占用，只是不顯示
	document.getElementById("id").style.visibility="hidden";
        document.getElementById("id").style.visibility="visible";
   實驗
   <table>
   	<tr id="test" style="visibility:hidden">
            <th>名稱1</th>
            <td>小明</td>
        </tr>
        <tr >
            <th>名稱2</th>
            <td>小楷</td>
        </tr>
   </table>

方法2.

	//隱藏後頁面位置被占用，只是不顯示，隱藏後顯示樣式會跑掉，會改變原有style，樣式會被覆蓋掉
=       
	document.getElementById("id").style.display="none";
        document.getElementById("id").style.display="inline";
    <table>
   	<tr id="test" style="display:none">
            <th>名稱1</th>
            <td>小明</td>
        </tr>
        <tr >
            <th>名稱2</th>
            <td>小楷</td>
        </tr>
   </table>

方法3

	$('#id').show()/hide() 樣式不會跑掉
<table>
   	<tr id="test" style="display:none">
            <th>名稱1</th>
            <td>小明</td>
        </tr>
        <tr >
            <th>名稱2</th>
            <td>小楷</td>
        </tr>
   </table>

方法4 直接下hidden可以隱藏該欄位

   
<table>
   	<tr id="test" hidden>
            <th>名稱1</th>
            <td>小明</td>
        </tr>
        <tr >
            <th>名稱2</th>
            <td>小楷</td>
        </tr>
   </table>

參考文章