숨기기 나머지

Question

내가 작업의 자바 스크립트 함수가 테이블 의 숨겨진 행을 보여주는 것입니다이 보여주는 자바 스크립트 기능을 하나의 행에 대해 작동하고 정지 row..onclick 테이블을 보여

기능을 blabla (카운트) {카운트 ++; var id = "ph"+ count; document.getElementById (id) .style.display = "";

<script to declare globale variable count=1/> 
<table> 
<tr id="ph1"><td>haha:<button onClick="blabla(count)"><button></td></tr> 
<tr id="ph2" style="display:none"><td>hoho</td></tr> 
<tr id="ph3" style="display:none"><td>hihi</td></tr> 
</table> 

는 페이지가로드되고 난 버튼을 한 번 클릭 : }

그럼 내가 온 클릭 이벤트를 트리거 1 행의 버튼과 같은 문서의 테이블을 가지고 : 두 번째 행이 표시되지만 두 번째 클릭시 세 번째 행은 표시되지 않습니다 ... 왜 그럴까요? 누구든지 나를 도울 수 있습니까?

Answer 1

함수 호출이 끝나자 마자 변수 "count"가 사라 지므로 매번 동일한 테이블 행이 표시됩니다. 당신은 전역 범위에 변수를 이동 시도 할 수 있습니다 : 당신의 HTML을 기반으로

이

var count = 1; 
function blabla() { 
    count++; 
    var id="ph"+count; 
    document.getElementById(id).style.display=""; 
} 

, 당신이 다음과 같이 변경 수 :

<table> 
    <tr id="ph1"> 
     <td>haha:</td> 
     <td><input type="file" id="w"/></td> 
     <td><img src="Style/Images/plus.jpg" onClick="blabla()"/></td> 
    </tr> 
    <tr id="ph2" style="display:none"> 
     <td>hoho:</td> 
     <td><input type="file" id="1"/></td> 
    </tr> 
    <tr id="ph3" style="display:none"> 
     <td>hihi:</td> 
     <td><input type="file" id="2"/></td> 
    </tr> 
</table> 

그래서 그냥 함수 호출에서 카운트를 제거합니다.

그러나 버튼을 계속 누르면 오류가 발생합니다 ("ph"로 시작하는 ID가있는 요소가 부족한 경우). 당신이 일이 원하지 않는 경우, 같은 것을 할 :

var count = 2; 
function blabla() { 
    var element = document.getElementById("ph" + count); 
    if (!element) { 
     alert('No more rows!'); 
    } else { 
     element.style.display = ""; 
     count++; 
    } 
} 

마지막으로,이 jQuery를 같은 것을 사용하여 더 견고하게 할 수 있지만, 나는 가능한 한 원래의 코드에 가깝게 유지하려고합니다.

Answer 2

function blabla(count) 
{ 
    count++; // why using this code? remove this code. 
    var id="ph"+count; document.getElementById(id).style.display=""; 
} 

count++ 코드없이 시도하십시오.

var count = 0; 
function blabla() 
{ 
    var id="ph"+count; document.getElementById(id).style.display=""; 
    count++; // this will provide you to show next row for another click. 
}