JSP로 동적으로 생성 된 html 버튼에 대한 가시성을 전환하십시오

Question

웹 개발에 익숙하지 않습니다 ... jsp를 사용하여 html 테이블을 생성 중입니다. (관심이있는 사람들을위한 스프링 이내)

<tbody> 
<c:forEach var="row" items="${data.rows}"> 
    <tr> 
     <td> <c:out value="${row.DATA1}" /> </td> 
     <td> <c:out value="${row.DATA2}" /> </td> 
     <td class="formClass" title="click to edit..."> 
      <form> 
      <input type="text" name="DATA" value="${row.DATA}"> 
      <input type="submit" value="Submit"> 
      </form> 
     </td> 
     <td> <c:out value="${row.DATA3}" /> </td> 

     </tr> 
    </c:forEach> 
</tbody>  

문제는 내가 사람이 텍스트 영역에서 딸깍 소리가 날 때까지 제출 버튼이 보이지 갖고 싶어한다는 것이다. 그것은 데이터베이스에서 오는 것이기 때문에 얼마나 많은 행이 있을지 모르기 때문에 각 제출 버튼에 ID를 할당 할 수는 없습니다.

어떻게하면됩니까? 가능하다면 별도의 CSS 또는 js를 만들기 전에 .jsp 파일에 솔루션을 맞추고 싶습니다.

Answer 1

는, 텍스트 입력의 모든 요소에 focus 이벤트를 결합하는 것입니다

여기에 간단한 실행 가능한 예입니다. 이벤트 함수 this은 이벤트를 트리거 한 입력을 나타냅니다. 입력 내용이 형제이기 때문에 siblings 선택기를 사용하여 특정 텍스트 입력의 형제 제출 버튼을 표시 할 수 있습니다. 만약 당신이 좋아하면

// before using jQuery, you have to wait for the dom to be ready 
$(document).ready(function() { 

    // bind an focus event to all the text inputs 
    $('input[type="text"]').on('focus', function() { 

     // inside this function, $(this) is referring to the input that triggered the event 
     $(this).siblings('input[type="submit"]').fadeIn(); 

    }); 

}); 

또한 .show() 대신 .fadeIn() 사용할 수 있습니다

그래서 여기에 코드입니다.

input[type="submit"] { 
    display: none; 
} 

또는 jQuery를 :

CSS를 먼저 제출 버튼을 숨길 기억 http://jsfiddle.net/zmr5ytrk/1/

Answer 2

jQuery를 사용하면됩니다.

먼저 양식에 클래스 또는 ID를 정의해야합니다. <form class="CLASSNAME">.

그런 다음이 시도 :

이

$('.CLASSNAME').each(function(){ 
    var form_elements=$(this.elements); //gets all elements that belong to this form 
    var form = $(this); 
    form_elements.each(function(){ 
     var element = $(this); 
     if(element.attr('type')!="submit"){ //exclude the button type 
      element.on('focus', function(){ //add focus handler that will trigger when you click on an element 
       form.find('input[type="submit"]').fadeIn(); //shows the button 
      }); 
     } 
    }); 
}); 

당신이, 당신의 CSS에 display:none;에 버튼을 제출 fadeIn() 기능 display:block;

참고로 다시 설정됩니다 설정하는 것을 잊지 마세요 :이 작동합니다 클래스가있는 모든 양식 .CLASSNAME!

Answer 3

HTML을 전혀 변경할 필요가 없습니다. jQuery를 사용하면 매우 간단합니다. 먼저 페이지에서 submit 개의 요소를 모두 숨기십시오. 입력 내용에 초점이 맞춰지면 다음 submit 형제를 찾아 보여줍니다. 당신이해야 할 일은

$(function() { 
 
    $('input[type="submit"]').hide(); 
 
}); 
 

 
$('input[type="text"]').on('focus', function() { 
 
    $(this).next('input[type="submit"]').show(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
     <td>DATA1</td> 
 
     <td>DATA2</td> 
 
     <td class="formClass" title="click to edit..."> 
 
      <form> 
 
      <input type="text" name="DATA" value="row.DATA"> 
 
      <input type="submit" value="Submit"> 
 
      </form> 
 
     </td> 
 
     <td>DATA3</td> 
 
    </tr> 
 
    <tr> 
 
     <td>DATA1</td> 
 
     <td>DATA2</td> 
 
     <td class="formClass" title="click to edit..."> 
 
      <form> 
 
      <input type="text" name="DATA" value="row.DATA"> 
 
      <input type="submit" value="Submit"> 
 
      </form> 
 
     </td> 
 
     <td>DATA3</td> 
 
    </tr> 
 
</table>