js控制tr顯示和隱藏

標籤：js   顯示   tr   隱藏   tr錯位   

很久沒有寫代碼，最近新接了一個項目，開始記錄自己開發過程中遇到的一些問題。

關於js控制tr的顯示與隱藏

最開始寫法是：

<tr id="att" style="display:none;">

<td style="text-align:right;">附件檔案：</td>

<td>

           <div id="div_fujian">  

            <div class="input-outer"><input type="file" class="tuiTrim input" name="fujian" size="30" maxlength="15" id="fujian" tabindex="1"/></div>  

        </div>  

        <input type="button" id="btn_add2" value="增加附件" >

        </td>

        </tr>

js方法為：function setDetailMsgRow(rowID,sel) {    var row = document.getElementById(rowID);       if (row != null) {         if (sel.value == 0) {         row.style.display = "block";        }         else {         row.style.display = "none";         }     } }但是最後在看效果的時候，發現，會有錯位現象發生，如

650) this.width=650;" src="http://s1.51cto.com/wyfs02/M01/8B/90/wKiom1hRBJXCfiT2AAArHo_V1kU183.png-wh_500x0-wm_3-wmp_4-s_1292911146.png" title="123.png" style="width:500px;height:444px;" width="500" height="444" border="0" hspace="0" vspace="0" alt="wKiom1hRBJXCfiT2AAArHo_V1kU183.png-wh_50" />

控制顯示的tr出現的時候，發生了錯位現象，尋找原因，如下：

使用display = block 就變成區塊層級元素了，這樣的設定會改變頁面的格局，這樣就會錯位；

那麼該如何設定，才可以實現js控制tr的顯示與隱藏呢，

可以把 display 屬性改為 table-row

對於table-row的說明如，大家可以學習一下，我是學到了

650) this.width=650;" src="http://s3.51cto.com/wyfs02/M01/8B/91/wKiom1hRBebCf7DYAACKyp4t398735.png-wh_500x0-wm_3-wmp_4-s_1832477583.png" title="243.png" alt="wKiom1hRBebCf7DYAACKyp4t398735.png-wh_50" />

本文出自 “butcher36” 部落格，請務必保留此出處http://butcher36.blog.51cto.com/9315484/1882726

js控制tr顯示和隱藏