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>

来源

2017-02-22 beginner

这些着名的textareas在哪里？ – Superdrac

这是 – beginner

你必须每个元素<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"; 
    } 


    } 
}

Fiddle Link for demo

来源

2017-02-22 17:40:08

谢谢，它确实有效！但是，当我点击它时，它不再隐藏。 – beginner

你想隐藏一遍点击 –

更新检查小提琴吧 –

所有这些都显示的原因是因为你在你的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>

来源

2017-02-22 16:33:02

JavaScript-如何通过点击图片显示/隐藏tr textarea

回答

相关问题