js控制TR的顯示隱藏

字號(hào):


    下文分享的一段代碼:選擇是的按鈕就顯示身高和體重的文本框的代碼。注意:ready方法必須要引用jquery的庫(kù)。
    1.html Code
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>無(wú)標(biāo)題文檔</title>
    <style type="text/css">
      .div1{ width:300px; height:80px; border:1px solid green;}
      .div2{ width:300px; height:80px; border:1px solid red;}
    </style>
    <SCRIPT language=javascript type=text/javascript src="jquery-1.7.2.min.js"></SCRIPT>
    <script type="text/javascript">
      function setDetailMsgRow(rowID,sel) {
        var row = document.getElementById(rowID); 
          if (row != null) { 
            if (sel.value == 1) { 
              row.style.display = "block";
            } 
            else { 
               row.style.display = "none"; 
            } 
        } 
      } 
      /*自動(dòng)加載隱藏框,ready方法必須要引用jquery的庫(kù)*/
      $(document).ready(function(){ 
    var sel = document.getElementById('selID');
        setDetailMsgRow('show',sel);
      });
      function onload() {var sel = document.getElementById('selID');
        setDetailMsgRow('show',sel); 
      } 
    </script>
    </head>
    <body>
    <TABLE cellpadding="2" cellspacing="0">
    <TBODY>
    <TR>
    <TD>是否填寫(xiě)身高體重</TD>
    <TD><SELECT width='100%' id=selID onchange = "setDetailMsgRow('show',this)">
      <OPTION value="1" selected>是</OPTION>
      <OPTION value="0">否</OPTION>
      <OPTION ></OPTION>
      </SELECT>
    </TD><TD></TD><TD></TD></TR>
    <TR id=show>
    <TD>身高</TD>
    <TD><INPUT id=Height></TD>
    <TD>體重</TD>
    <TD><INPUT id=Weight></TD></TR>
    </TBODY>
    </TABLE>
    </body>
    </html>
    網(wǎng)上可以下載jquery-1.7.2.min.js將其引入。
    2.效果
    名單
    以上就是本文的全部?jī)?nèi)容,希望對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。