jquery로 행 표시/숨기기

안녕하세요 다른 게시물의 수정 된 코드를 사용하고 있습니다. 기본적으로 모든 행 (예 : 50)을 보여주기 위해 표의 10 개 행을 표시하는 것을 전환하고 싶습니다. 내가 10 행에서 모두 보여주고있어,하지만 내가 지금해야 할 일은 내가 다시 div를 클릭하면 토글 또는 10 행을 보여 주 다시 설정 있도록 코드입니다.jquery로 행 표시/숨기기

<script type="text/javascript"> 
var numShown = 10; // Initial rows shown & index 
var numRows = $('tbody').find('tr').length; 
var numLeft = numRows - numShown; 

$(document).ready(function(){ 
// Hide rows and add clickable div 
$('tbody') 
    .find('tr:gt(' + (numShown - 1) + ')').hide().end() 
    $('#table_wrapper').after('<div id="more">Show all offers <span> 
    (' + numLeft + ' more)</span></div>'); 

$('#more').click(function(){ 
    numShown = numShown + numRows; 
    $('tbody').find('tr:lt('+numShown+')').show(); 
    $("#more").html("Show top 10 offers"); 
}) 
}) 
</script>

출처

2010-05-26 Michael

이것은 .toggle() 방법의 용도 중 하나입니다

$('#more').toggle(
      function(){ 
      numShown = numShown + numRows; 
      $('tbody').find('tr:lt('+numShown+')').show(); 
      $("#more").html("Show top 10 offers"); 
      }, function() { 
      // set the local vars you need here 
      $('tbody').find('tr:gt('+(numShown-1)+')').hide(); 
      $('#more').html('Show all offers <span>('+numLeft+' more)</span>'); 
      });

나는 당신의 설치를 어떻게 작동 할 수는 정확히 잘 모르겠어요에는 태그가 없습니다 때문에 , 포인트는 두 번째 함수의 초기 상태에서 행을 재설정하는 것입니다. toggle()

출처

2010-05-26 23:05:41 mVChr

'토글'의 형태에 대해 알지 못했습니다. jQuery가 테이블이있는 "상태"에 대해 어떻게 알고 있는지 궁금합니다. -? – nc3b

넵 이것이 내가 찾던 고마워요! – Michael

내가 추가 할 수있는 것이 있습니까? 토글이 행을 다시 콜 랩시/숨길 때 브라우저의 시점이 원래 위치의 맨 아래로 돌아갑니다. – Michael

$(some_selector)은 일치하는 요소의 목록을 반환합니다. .slice()으로 전화를 걸고 각 요소에서 원하는대로 수행하십시오. 목록의 항목은 jquery 객체가 아니라 기본 DOM 객체 (getElementBy... 메소드에서 가져온 객체)입니다. 이 작업을 수행하거나 $(domobject)을 실행하여 jquery 객체를 다시 가져올 수 있습니다.

출처

2010-05-26 22:56:00 Marian

이 시도 :

이

$('#more').click(function(){ 
    if(numShown <= 10) 
    { 
     //show some more 
     numShown = numShown + numRows; 
     $('tbody').find('tr:lt('+numShown+')').show(); 
     $("#more").html("Show top 10 offers"); 
    } 
    else 
    { 
     //hide some rows 
     numShown = 10; 
     $('tbody').find('tr:gt('+numShown+')').hide(); 
     $("#more").html("Show more"); 
    } 
})

출처

2010-05-26 22:58:43 nc3b

행을 숨기려면 addClass()를 사용하는 것이 좋습니다. CSS 스타일 시트에 display: none;으로 스타일이 지정되었습니다. 이전에 숨겨진 행을 표시하려면이 클래스가있는 행을 선택하고 클래스를 제거해야합니다. 예 :

$('.hidden_row').removeClass('hidden_row');

출처

2010-05-26 23:07:11 FelipeAls

jquery로 행 표시/숨기기

답변

관련 문제