Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/34.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
如何使用display属性(html/php)更改特定元素的可见性_Html_Css_Html Table_Visibility - Fatal编程技术网

如何使用display属性(html/php)更改特定元素的可见性

如何使用display属性(html/php)更改特定元素的可见性,html,css,html-table,visibility,Html,Css,Html Table,Visibility,免责声明:这是一段代码,不是整个源代码 因此,目前我有一个大表,包含给定日期(周一/周二)的各个表。每天都有一个下拉框,用来生成大大小小的文本框,这部分工作正常(如星期二部分所示) 我遇到问题的部分是试图更改任何其他元素的可见性,无论是h2元素、td元素,甚至仅仅是tbody元素(我相信每个元素的默认显示值分别是“block”、“table row”和“table row group”) 我在Chrome的源代码控制台中遇到的一个错误是,无论元素是什么类型(文本框除外),它都表示元素未定义,即使

免责声明:这是一段代码,不是整个源代码

因此,目前我有一个大表,包含给定日期(周一/周二)的各个表。每天都有一个下拉框,用来生成大大小小的文本框,这部分工作正常(如星期二部分所示)

我遇到问题的部分是试图更改任何其他元素的可见性,无论是h2元素、td元素,甚至仅仅是tbody元素(我相信每个元素的默认显示值分别是“block”、“table row”和“table row group”)

我在Chrome的源代码控制台中遇到的一个错误是,无论元素是什么类型(文本框除外),它都表示元素未定义,即使文本框的名称和ID以完全相同的方式显示

如果你明白为什么会这样,请告诉我

注意:我目前正在使用的特定元素是周一部分中的“周一工作”

                <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>

名
电子邮件地址
日期
$('dates').show();
星期一(日期)
在任
未排定
远程工作
随叫随到(非随叫随到)
随叫随到
假日
批准无薪休假
极端情况下的无薪休假
生病的
暂停的
不露面
不打电话/不露面
任务
解释一下你今天在这里做了什么
麻烦
解释此处发生的任何问题
改进
在这里说明你想做得更好的地方
星期二(日期)
在任
未排定
远程工作
随叫随到(非随叫随到)
随叫随到
假日
批准无薪休假
极端情况下的无薪休假
生病的
暂停的
不露面
不打电话/不露面
任务
解释一下你今天在这里做了什么
 document.getElementById('mondayWork').style.display = 'none'