드롭 다운 변경시 필드 표시/숨기기 방법?

Question

나는 Stackoverflow를 검색하여 jQuery 또는 간단한 인라인 js에 의해 드롭 다운 변경시 필드를 숨기거나 표시하는 방법에 대한 많은 답변을 발견했습니다. 하지만 내 문제는 테이블 내부에서 사용하는 것입니다.

처음에는 jQuery 대신 인라인 단순 js를 사용하십시오. recaptcha가 선택되면 개인 키와 공개 키 필드가 표시됩니다. 나는 테이블을 사용하므로 전체 행을 숨겨야합니다. 테이블의 행 사이의 간격을 피하기 위해 필드를 숨겨야하는 경우 양식의 나머지 부분이 선택 메뉴 바로 아래에 있어야합니다. 그러나 그것은 행을 위해 작동하지 않습니다. tr에보다는 필드에 스타일을 추가 했으므로 두 번째 필드 만 in/invisible이됩니다. (첫 번째 테스트에서는 그냥 tr을 사용했고 두 번째 테스트는 필드에서 어떤 일이 발생했는지 알아보기 위해 사용했지만 두 번째 것은 작동합니다.) 행 제거 및 폼의 나머지 작업을 설정하는 방법은 피하는 것이 좋습니다. 양식에 두 개의 빈 행? 궁극적 인 목표는 jQuery와 함께하는 것입니다. 인라인 간단한 js 대신 jQuery로 해결하는 방법에 대한 답변도 환영합니다. 그래서 당신이 정말로 this.form['recaptcha']을 사용할 수 없습니다

<tr class="something1"> 
<td class="left">Activate Captcha: </td> 
<td class="right"><select name="activate_captcha" onchange="if (this.value=='recaptcha'){this.form['recaptcha'].style.visibility='visible'}else{this.form['recaptcha'].style.visibility='hidden'};"> 
<option value="none">None</option> 
<option value="recaptcha">ReCaptcha</option> 
</select> 
</td> 

</tr> 
<tr class="something1" id="recaptcha" style="visibility:hidden;"> 
<td class="left">ReCaptcha Public Key: </td> 
<td class="right"><input type="text" size="40" name="pub_key" value="" /></td> 

</tr> 
<tr class="something1"> 
<td class="left">ReCaptcha Private Key: </td> 
<td class="right"><input type="text" id="recaptcha" style="visibility:hidden;" size="40" name="priv_key" value="" /></td> 
</tr> 

</tr> 
<tr class="something1"> 
<td class="left">This row should come up under dropdown if rows above are invisible: </td> 
<td class="right"><input type="text" value="" /></td> 
</tr>