2012-12-09 5 views
3

HTML :JQuery와 쇼() 숨기기() 후

<table id="table1"> 
    <tr> 
     <th>1</th> 
     <th>2</th> 
     <th>3</th> 
    </tr> 
    <tr> 
     <td class="table1column1"><input type="text" id="idInput1" /></td> 
     <td class="table1column2"><input type="text" id="idInput2" /></td> 
     <td class="table1column3"><input type="text" id="idInput3" /></td> 
     </tr> 
</table> 
<button>Hide-Text-Show</button> 

JQuery와 :

$(document).ready(function() { 
    $('button').click(function() { 
     $('#idInput1').hide(); 
     $('.table1column1').text('Test'); 
     $('#idInput1').show(); 
    }); 
}); 

http://jsfiddle.net/QNxyG/

내가 이해하지 못하는 이유는 TD 요소에 텍스트를 추가 할 때 show() 메소드가 작동하지 않습니까?

감사

+1

아래의 답변이 정확하지만, 무슨 미래에 당신이 나는 파이어 폭스 또는 개발자의 예를 들면 불을 지르고 위해 사용하는 것이 좋습니다, 자기를 위해 밖으로 찾으려면 Chrome 또는 IE의 도구 –

+0

드디어이 솔루션을 선택했습니다 : http://jsfiddle.net/QNxyG/3/ – user1889867

답변

4

http://jsfiddle.net/QNxyG/4/

#idInput1 요소 ( 제거됩니다) 그래서 다음 $('#idInput1')을 덮어 쓰기 때문에) 당신은 당신의 예제에서 무엇이든 덮어 씌우고 ... 입력이 더 이상 존재하지 않는다.

HTML

<table id="table1"> 
    <tr> 
     <th>1</th> 
     <th>2</th> 
     <th>3</th> 
    </tr> 
    <tr> 
     <td class="table1column1"><span class="text" style="display:none;"></span><input type="text" id="idInput1" /></td> 
     <td class="table1column2"><span class="text" style="display:none;"></span><input type="text" id="idInput2" /></td> 
     <td class="table1column3"><span class="text" style="display:none;"></span><input type="text" id="idInput3" /></td> 
    </tr> 
</table> 

<button>Hide-Text-Show</button> 

jQuery를

$(document).ready(function() { 
    $('button').click(function() { 
     var input = $('#idInput1'); 
     var text = input.parent('td').find('.text'); 
     text.text('text'); 
     text.toggle(); 
     input.toggle(); 
    }); 
});​ 
+0

그럼 td에서 입력과 텍스트를 어떻게 전환 할 수 있습니까? 예를 들어, 첫 번째 클릭은 입력을 숨기고 텍스트를 표시하고, 두 번째는 입력 및 숨기기를 보여줍니다. – user1889867

+0

여기보세요 http : //jsfiddle.net/QNxyG/4/ ... 표시 없음 및 클래스 이름이있는 빈 기간을 표시하고 표시 및 숨기기 대신 토글() 사용 – Mik

+0

감사합니다! 이것은 정확히 내가 찾고 있었던 것입니다. – user1889867

4

.text() 당신은 (.. 보여주는 요소를 찾지는 .text와

0
$(document) 
    .ready(function() { 
    $('button') 
     .click(function() { 
     $('#idInput1') 
      .hide(function() { 
      $('.table1column1 input') 
       .val('Test', function() { 
       $('#idInput1') 
        .show(); 
      }); 
     }); 
    }); 
}); 
+0

코드를 인수로 입력하십시오. –