JavaScript-如何通过点击图片显示/隐藏tr textarea
我有三个图片,分别叫做“down.png”和三个dropDownTextAreas。每次点击图像时,我都想单独显示/隐藏textarea。JavaScript-如何通过点击图片显示/隐藏tr textarea
例如,如果单击第一形象,第一textarea的显示出来,点击第二图像,第二textarea的显示等
但我的问题是,每一次当我点击的形象之一,所有文本域都显示出来。
非常感谢!
<script>
function showHide(){
var textArea = document.getElementsByClassName("dropDownTextArea");
for(var i=0; i<textArea.length; i++){
if(textArea[i].style.display == "none"){
textArea[i].style.display="table-row";
}else{
textArea[i].style.display="none";
}
}
}
</script>
<style>
.dropDownTextArea{
display: none;
}
</style>
<table id="myTable" >
<tr>
<th></th>
<th>STUDENT</th>
<th>ADVISOR</th>
<th>AWARD<br/>STATUS</th>
<th>SEMESTER</th>
<th>TYPE</th>
<th>BUDGET<br />#</th>
<th>PERCENTAGE</th>
</tr>
<tr>
<td>
<input type="checkbox" name="myCheckbox" /><br /><br />
<img src="down.png" width="25px" onclick="showHide()"/>
</td>
<td>Student 1</td>
<td>Teacher 1</td>
<td>Approved</td>
<td>Fall</td>
<td>TA</td>
<td>12345</td>
<td>100%</td>
</tr>
<tr class="dropDownTextArea"><td id="myDropDown" colspan="8">
Advisor:<br /><br />
Award Details<br />
Summer 1-2014(TA)<br />
Budget Number: <img src="pencil.png"><br />
Tuition Number: <img src="pencil.png"><br />
Comments:<br /><br /><br />
Award Status:<br /><br /><br />
</td></tr>
<tr>
<td>
<input type="checkbox" name="myCheckbox" /><br /><br />
<img src="down.png" width="25px" onclick="showHide()"/>
</td>
<td>Student 2</td>
<td>Teacher 2</td>
<td>Approved</td>
<td>Fall</td>
<td>TA</td>
<td>23456</td>
<td>100%</td>
</tr>
<tr class="dropDownTextArea"><td id="myDropDown" colspan="8">
Advisor:<br /><br />
Award Details<br />
Summer 1-2014(TA)<br />
Budget Number: <img src="pencil.png" > <br />
Tuition Number: <img src="pencil.png" ><br />
Comments:<br /><br /><br />
Award Status:<br /><br /><br />
</td></tr>
<tr>
<td>
<input type="checkbox" name="myCheckbox" "/><br /><br />
<img src="down.png" width="25px" onclick="showHide()"/>
</td>
<td>Student 3</td>
<td>Teacher 3</td>
<td>Approved</td>
<td>Fall</td>
<td>TA</td>
<td>34567</td>
<td>100%</td>
</tr>
<tr class="dropDownTextArea" "><td id="myDropDown" colspan="8">
Advisor:<br /><br />
Award Details<br />
Summer 1-2014(TA)<br />
Budget Number: <img src="pencil.png"><br />
Tuition Number: <img src="pencil.png"><br />
Comments:<br /><br /><br />
Award Status:<br /><br /><br />
</td></tr>
</table>
你必须每个元素<img>
绑定为onclick="showHide(this)"
的功能showHide(obj)
DOM元素的Properties and Methods对象
所以你的功能将
function showHide(obj) {
var textArea = document.getElementsByClassName("dropDownTextArea");
for (var i = 0; i < textArea.length; i++) {
if (textArea[i].previousElementSibling.firstElementChild.children[3] == obj) {
if (textArea[i].style.display == "table-row") {
textArea[i].style.display = "none";
} else {
textArea[i].style.display = "table-row"
}
} else {
textArea[i].style.display = "none";
}
}
}
所有这些都显示的原因是因为你在你的javascript中选择所有的。此行var textArea = document.getElementsByClassName("dropDownTextArea");
选择所有具有该类的元素,然后您继续将其全部显示出来。
您需要为每个下拉文本区域分别输入id
或class
,以便您可以单独选择它们。以下是您可以采取的一种潜在方法。
<script>
function showHide(dropdown){
var textArea = document.getElementById(dropdown)
if(textArea[i].style.display == "none"){
textArea[i].style.display="table-row";
}else{
textArea[i].style.display="none";
}
}
</script>
<style>
.dropDownTextArea{
display: none;
}
</style>
<table id="myTable" >
<tr>
<th></th>
<th>STUDENT</th>
<th>ADVISOR</th>
<th>AWARD<br/>STATUS</th>
<th>SEMESTER</th>
<th>TYPE</th>
<th>BUDGET<br />#</th>
<th>PERCENTAGE</th>
</tr>
<tr>
<td>
<input type="checkbox" name="myCheckbox" /><br /><br />
<img src="down.png" width="25px" onclick="showHide('dropdown_one')"/>
</td>
<td>Student 1</td>
<td>Teacher 1</td>
<td>Approved</td>
<td>Fall</td>
<td>TA</td>
<td>12345</td>
<td>100%</td>
</tr>
<tr class="dropDownTextArea" id="dropdown_one"><td id="myDropDown" colspan="8">
Advisor:<br /><br />
Award Details<br />
Summer 1-2014(TA)<br />
Budget Number: <img src="pencil.png"><br />
Tuition Number: <img src="pencil.png"><br />
Comments:<br /><br /><br />
Award Status:<br /><br /><br />
</td></tr>
<tr>
<td>
<input type="checkbox" name="myCheckbox" /><br /><br />
<img src="down.png" width="25px" onclick="showHide('dropdown_two')"/>
</td>
<td>Student 2</td>
<td>Teacher 2</td>
<td>Approved</td>
<td>Fall</td>
<td>TA</td>
<td>23456</td>
<td>100%</td>
</tr>
<tr class="dropDownTextArea" id="dropdown_two"><td id="myDropDown" colspan="8">
Advisor:<br /><br />
Award Details<br />
Summer 1-2014(TA)<br />
Budget Number: <img src="pencil.png" > <br />
Tuition Number: <img src="pencil.png" ><br />
Comments:<br /><br /><br />
Award Status:<br /><br /><br />
</td></tr>
<tr>
<td>
<input type="checkbox" name="myCheckbox"/><br /><br />
<img src="down.png" width="25px" onclick="showHide('dropdown_three')"/>
</td>
<td>Student 3</td>
<td>Teacher 3</td>
<td>Approved</td>
<td>Fall</td>
<td>TA</td>
<td>34567</td>
<td>100%</td>
</tr>
<tr class="dropDownTextArea" id="dropdown_three"><td id="myDropDown" colspan="8">
Advisor:<br /><br />
Award Details<br />
Summer 1-2014(TA)<br />
Budget Number: <img src="pencil.png"><br />
Tuition Number: <img src="pencil.png"><br />
Comments:<br /><br /><br />
Award Status:<br /><br /><br />
</td></tr>
</table>
你必须每个元素<img>
绑定为onclick="showHide(this)"
的功能showHide(obj)
DOM元素的Properties and Methods对象
所以你的功能将
function showHide(obj) {
var textArea = document.getElementsByClassName("dropDownTextArea");
for (var i = 0; i < textArea.length; i++) {
if (textArea[i].previousElementSibling.firstElementChild.children[3] == obj) {
if (textArea[i].style.display == "table-row") {
textArea[i].style.display = "none";
} else {
textArea[i].style.display = "table-row"
}
} else {
textArea[i].style.display = "none";
}
}
}
所有这些都显示的原因是因为你在你的javascript中选择所有的。此行var textArea = document.getElementsByClassName("dropDownTextArea");
选择所有具有该类的元素,然后您继续将其全部显示出来。
您需要为每个下拉文本区域分别输入id
或class
,以便您可以单独选择它们。以下是您可以采取的一种潜在方法。
<script>
function showHide(dropdown){
var textArea = document.getElementById(dropdown)
if(textArea[i].style.display == "none"){
textArea[i].style.display="table-row";
}else{
textArea[i].style.display="none";
}
}
</script>
<style>
.dropDownTextArea{
display: none;
}
</style>
<table id="myTable" >
<tr>
<th></th>
<th>STUDENT</th>
<th>ADVISOR</th>
<th>AWARD<br/>STATUS</th>
<th>SEMESTER</th>
<th>TYPE</th>
<th>BUDGET<br />#</th>
<th>PERCENTAGE</th>
</tr>
<tr>
<td>
<input type="checkbox" name="myCheckbox" /><br /><br />
<img src="down.png" width="25px" onclick="showHide('dropdown_one')"/>
</td>
<td>Student 1</td>
<td>Teacher 1</td>
<td>Approved</td>
<td>Fall</td>
<td>TA</td>
<td>12345</td>
<td>100%</td>
</tr>
<tr class="dropDownTextArea" id="dropdown_one"><td id="myDropDown" colspan="8">
Advisor:<br /><br />
Award Details<br />
Summer 1-2014(TA)<br />
Budget Number: <img src="pencil.png"><br />
Tuition Number: <img src="pencil.png"><br />
Comments:<br /><br /><br />
Award Status:<br /><br /><br />
</td></tr>
<tr>
<td>
<input type="checkbox" name="myCheckbox" /><br /><br />
<img src="down.png" width="25px" onclick="showHide('dropdown_two')"/>
</td>
<td>Student 2</td>
<td>Teacher 2</td>
<td>Approved</td>
<td>Fall</td>
<td>TA</td>
<td>23456</td>
<td>100%</td>
</tr>
<tr class="dropDownTextArea" id="dropdown_two"><td id="myDropDown" colspan="8">
Advisor:<br /><br />
Award Details<br />
Summer 1-2014(TA)<br />
Budget Number: <img src="pencil.png" > <br />
Tuition Number: <img src="pencil.png" ><br />
Comments:<br /><br /><br />
Award Status:<br /><br /><br />
</td></tr>
<tr>
<td>
<input type="checkbox" name="myCheckbox"/><br /><br />
<img src="down.png" width="25px" onclick="showHide('dropdown_three')"/>
</td>
<td>Student 3</td>
<td>Teacher 3</td>
<td>Approved</td>
<td>Fall</td>
<td>TA</td>
<td>34567</td>
<td>100%</td>
</tr>
<tr class="dropDownTextArea" id="dropdown_three"><td id="myDropDown" colspan="8">
Advisor:<br /><br />
Award Details<br />
Summer 1-2014(TA)<br />
Budget Number: <img src="pencil.png"><br />
Tuition Number: <img src="pencil.png"><br />
Comments:<br /><br /><br />
Award Status:<br /><br /><br />
</td></tr>
</table>
这些着名的textareas在哪里? – Superdrac
这是
回答
你必须每个元素
<img>
绑定为onclick="showHide(this)"
的功能showHide(obj)
DOM元素的Properties and Methods对象
所以你的功能将
Fiddle Link for demo
谢谢,它确实有效!但是,当我点击它时,它不再隐藏。 – beginner
你想隐藏一遍点击 –
更新检查小提琴吧 –
所有这些都显示的原因是因为你在你的javascript中选择所有的。此行
var textArea = document.getElementsByClassName("dropDownTextArea");
选择所有具有该类的元素,然后您继续将其全部显示出来。您需要为每个下拉文本区域分别输入
id
或class
,以便您可以单独选择它们。以下是您可以采取的一种潜在方法。相关问题