如何使用display屬性更改特定元素的可見性（html/php）

Question

聲明：這是一段代碼段，不是源代碼的完整內容。

因此，目前我有一個大桌子在一個給定的一天（星期一/星期二）包圍個別表。每天都有一個應該生成大小文本框的下拉框，並且該部分有效（如週二部分所示）。

我遇到問題的部分是試圖改變其他任何東西的可見性，無論是h2元素，td元素還是tbody元素（我相信每個元素的默認顯示值都是「塊「，」錶行「和」錶行組「）。

我在Chrome的源代碼控制檯中遇到的錯誤是，無論元素是什麼類型（文本框除外），它都表示它的未定義，即使文本框的名稱和ID顯示在完全相同的方式。

請讓我知道，如果你明白爲什麼會發生這種情況。

注意：我與目前工作的特殊元素是「mondayWork」在週一部分。

   <table border="0" cellpadding="4" cellspacing="2" width="500"> 
        <tbody> 

         <!--Name text box--> 
         <tr> 
          <td align="left">First and Last Name</td> 
          <td align="left"> 
           <input type="text" name="name" id="name"> 
          </td> 
         </tr> 

         <!--Email text box--> 
         <tr> 
          <td align="left">Email Address</td> 
          <td align="left"> 
           <input type="text" name="email" id="email"> 
          </td> 
         </tr> 

         <!--Date calendar (user chooses first monday of the week--> 
         <tr> 
          <td align="left">Date</td> 
          <td align="left"> 
           <input type="date" onchange=name="date" id="date"> 
          </td> 
         </tr>  

         <script> 
         $('dates').show(); 
         </script> 

         <div id="dates"> 

         <!--Shift Drop Down Box (Monday)--> 
         <table> 
          <thead> 
           <tr> 
            <th align="left">Monday (Date)</th> 
            <th align="left"> 
             <select name="mondayShift" id="mondayShift" 
             onchange= 
             "if (this.value=='1' || this.value=='3' || this.value=='5' || this.value=='8' || this.value=='9' || this.value=='10' || this.value=='11' || this.value=='12'){ 
             this.form['ddSTBM'].style.display='none' 
             this.form['mondayWork'].style.display='table-row-group' 
             } 
             if (this.value=='2' || this.value=='7'){ 
             this.form['ddSTBM'].style.display='none' 
             this.form['mondayWork'].style.display='none' 
             } 
             if (this.value=='4' || this.value=='6'){ 
             this.form['ddSTBM'].style.display='inline' 
             this.form['mondayWork'].style.display='none' 
             }         
             ">  
              <option selected disabled hidden value=''></option> 
              <option value="1">In Office</option><!--Generates large text box-->  
              <option value="2">Not Scheduled</option>   
              <option value="3">Worked Remotely</option><!--Generates large text box--> 
              <option value="4">On Call (Not called in)</option><!--Generates small text box--> 
              <option value="5">On Call (Called in)</option><!--Generates large text box--> 
              <option value="6">Holiday</option><!--Generates small text box--> 
              <option value="7">Unpaid Time Off-Approved</option> 
              <option value="8">Unpaid Time Off-Extreme Circumstances</option><!--Generates large text box--> 
              <option value="9">Sick</option><!--Generates large text box--> 
              <option value="10">Suspended</option><!--Generates large text box--> 
              <option value="11">No Show</option><!--Generates large text box--> 
              <option value="12">No Call/No Show</option> <!--Generates large text box--> 
             </select> 
            </th> 
           </tr> 
          </thead> 
          <tbody name="mondayWork" id="mondayWork" style="display: none;"> 
           <!--Dropdown Small Text Box (Monday)--> 
           <tr> 
            <td align="left"> 
             <input type="text" name="ddSTBM" id="ddSTBM" style="display: none;"> 
            </td> 
           </tr> 

           <!--Dropdown Large Text Box (Monday)--> 
           <tr> 
            <td name="tdM1" id="tdM1" align = "right">Tasks</td> 
           </tr> 
            <!--name="hdrM1" id="hdrM1" align = "right" style="text-align:left; display: none;"--> 

           <tr> 
            <td align = "right"> 
             <textarea rows="10" cols="50" name="ddLTBM" id="ddLTBM">Explain what you did today here</textarea> 
             </td> 
           </tr> 

           <!--Troubles Large Text Box--> 
           <tr> 
            <td align = "left"> 
             <h2 name="hdrM2" id="hdrM2" style="text-align:left;">Troubles</h2> 
             <textarea rows="10" cols="50" name="ddLTBM2" id="ddLTBM2">Explain any issues that occurred here</textarea> 
            </td> 
           </tr>  

           <!--Improvement Large Text Box--> 
           <tr> 
            <td align = "left"> 
             <h2 name="hdrM3" id="hdrM3" style="text-align:left;">Improvement</h2> 
             <textarea rows="10" cols="50" name="ddLTBM3" id="ddLTBM3">Explain what you want to do better here</textarea> 
            </td> 
           </tr> 
          </tbody> 
         </table> 

         <!--Shift Drop Down Box (Tuesday)--> 
         <table> 
          <thead> 
           <th>Tuesday (Date)</th> 
           <th> 
            <select name="tuesdayShift" id="tuesdayShift" 
            onchange= 
            "if (this.value=='1' || this.value=='3' || this.value=='5' || this.value=='8' || this.value=='9' || this.value=='10' || this.value=='11' || this.value=='12'){ 
            this.form['ddSTBT'].style.display='none' 
            this.form['ddLTBT'].style.display='inline' 
            this.form['ddLTBT2'].style.display='inline' 
            this.form['ddLTBT3'].style.display='inline' 
            } 
            if (this.value=='2' || this.value=='7'){ 
            this.form['ddSTBT'].style.display='none' 
            this.form['ddLTBT'].style.display='none' 
            this.form['ddLTBT2'].style.display='none' 
            this.form['ddLTBT3'].style.display='none' 
            } 
            if (this.value=='4' || this.value=='6'){ 
            this.form['ddSTBT'].style.display='inline' 
            this.form['ddLTBT'].style.display='none' 
            this.form['ddLTBT2'].style.display='none' 
            this.form['ddLTBT3'].style.display='none' 
            }         
            ">  
             <option selected disabled hidden value=''></option> 
             <option value="1">In Office</option><!--Generates large text box-->  
             <option value="2">Not Scheduled</option>   
             <option value="3">Worked Remotely</option><!--Generates large text box--> 
             <option value="4">On Call (Not called in)</option><!--Generates small text box--> 
             <option value="5">On Call (Called in)</option><!--Generates large text box--> 
             <option value="6">Holiday</option><!--Generates small text box--> 
             <option value="7">Unpaid Time Off-Approved</option> 
             <option value="8">Unpaid Time Off-Extreme Circumstances</option><!--Generates large text box--> 
             <option value="9">Sick</option><!--Generates large text box--> 
             <option value="10">Suspended</option><!--Generates large text box--> 
             <option value="11">No Show</option><!--Generates large text box--> 
             <option value="12">No Call/No Show</option> <!--Generates large text box--> 
            </select> 
           </th> 
          </thead> 
          <tbody> 
           <!--Dropdown Small Text Box (Tuesday)--> 
           <tr> 
            <td align="left"> 
             <input type="text" name="ddSTBT" id="ddSTBT" style="display: none;"> 
            </td> 
           </tr> 

           <!--Dropdown Large Text Box (Tuesday)--> 
           <tr> 
            <td align = "right"> 
             <h2 name="hdrT1" id="hdrT1" style="text-align:left;">Tasks</h2> 
             <textarea rows="10" cols="50" name="ddLTBT" id="ddLTBT" style="display: none;">Explain what you did today here</textarea> 
            </td> 
           </tr> 

           <!--Troubles Large Text Box--> 
           <tr> 
            <td align = "left"> 
             <h2 name="hdrT2" id="hdrT2" style="text-align:left; display: none;">Troubles</h2> 
             <textarea rows="10" cols="50" name="ddLTBT2" id="ddLTBT2" style="display: none;">Explain any issues that occurred here</textarea> 
            </td> 
           </tr>  

           <!--Improvement Large Text Box--> 
           <tr> 
            <td align = "left"> 
             <h2 name="hdrT3" id="hdrT3" style="text-align:left; display: none;">Improvement</h2> 
             <textarea rows="10" cols="50" name="ddLTBT3" id="ddLTBT3" style="display: none;">Explain what you want to do better here</textarea> 
            </td> 
           </tr> 
          </tbody> 
         </table> 

<!--Submit button--> 
<tr> 
    <td align = "left"> 
     <input type="submit" name="btn_submit" id="btn_submit" style="width:150px; height:40px; font:bold 15px Venetian" value="Submit Report" > 
    </td> 
</tr> 

</div> 

</tbody></table> 
</form><br> 
        </body> 
        </html>"; 
    } 
} 
?> 
<br class="clearfloat"> 

Copyright &copy; <script language="javascript" type="text/javascript"> 
var today = new Date() 
var year = today.getFullYear() 
document.write(year) 
</script> 

Answer 1

這是因爲this.form['mondayWork']沒有引用屬於表單的元素。 mondayWork屬於tbody標記，它是id屬性。要選擇這個ID，你必須使用的document.getElementById

document.getElementById('mondayWork').style.display = 'none'