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

回答

相關問題