jquery를 사용하여 "n"행의 가시성을 변경하십시오.

Question

"n"개의 행을 가진 테이블이 아래와 같습니다.

<table> 
    <tr><td>1</td></tr> 
    <tr><td>2</td></tr> 
    <tr><td>3</td></tr> 
    <tr><td>4</td></tr> 
    <tr><td>5</td></tr> 
    <tr><td>6</td></tr> 
    <tr><td>7</td></tr> 
    <tr><td>8</td></tr> 
    <tr><td>9</td></tr> 
    <tr><td>10</td></tr> 
</table> 
    <span class="more">Show more</span> 

처음에는 페이지로드시 두 행만 표시하려고합니다. '추가'링크를 클릭하면 모든 클릭에 대해 3 개의 행이 표시되거나 표시됩니다.

jquery로 얻는 방법. 예제 코드 here. 미리 감사드립니다.

Answer 1

시작 CSS가있는 처음 두 tr를 제외한 모든 것을 숨김으로써 :

table tr {display:none;} 
table tr:first-child, table tr:nth-child(2) {display:block}​ 

그리고 마지막으로 볼 수있는 TR의 인덱스를 얻고, 보여 향후 3 등

$('.more')​.on('click', function() { 
    var vis = $('table tr:visible').last().index(); 
    $('table tr').slice(vis, vis+4).show(); 
});​ 

FIDDLE

Answer 2

당신은 CSS3에게 nth-child 선택하여 <tr> 남은 숨길 수 :

​tr:nth-child(n+4) { 
    display:none; 
}​ 

을 그리고 그들에게 보여 더보기 링크의 클릭에 JQuery와 사용

​$('.more')​.click(function() { 
    $('tr').show(); 
});​ 

예 : http://jsfiddle.net/viralpatel/BNrKn/