如何使用display属性（html / php）更改特定元素的可见性
免责声明：这是一个代码段，而不是整个来源。
所以目前我有一张大桌子包围了某一天（星期一/星期二）的个人牌桌。对于每一天都有一个下拉框，它应该生成大小文本框，并且该部分有效（如周二部分所示）。
我遇到问题的部分是试图改变其他任何东西的可见性，无论是h2元素，td元素还是tbody元素（我相信每个元素的默认显示值都是“阻止” “，”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 © <script language="javascript" type="text/javascript">
var today = new Date()
var year = today.getFullYear()
document.write(year)
</script>
1 个答案:
答案 0 :(得分：2)
这是因为this.form['mondayWork']没有引用属于表单的元素。 mondayWork属于tbody标记及其id属性。要选择此ID，您必须使用document.getElementById
document.getElementById('mondayWork').style.display = 'none'
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？