Nasıl bir tablo jQuery kullanarak orta gizleyeceğim?

SORU

18 EKİM 2008, CUMARTESİ

Nasıl bir tablo jQuery kullanarak orta gizleyeceğim?

Gerçekten uzun 3 sütunlu bir tablo var. Etmek istiyorum

<table>
    <tr><td>Column1</td><td>Column2</td></tr>
    <tr><td>Column1</td><td>Column2</td></tr>
    <tr><td>Start</td><td>Hiding</td></tr>
    <tr><td>Column1</td><td>Column2</td></tr>
    <tr><td>Column1</td><td>Column2</td></tr>
    <tr><td>Column1</td><td>Column2</td></tr>
    <tr><td>End</td><td>Hiding</td></tr>
    <tr><td>Column1</td><td>Column2</td></tr>
    <tr><td>Column1</td><td>Column2</td></tr>
</table>

Bu jQuery kullanarak elde etmeye çalışıyorum sonucudur.

Column1  Column2
Column1  Column2
...Show Full Table...
Column1  Column2
Column1  Column2

JQuery Haritayı kullanın/özelliği tablo en aza indirmek için gizlemek istiyorum ama hala üst ve alt satırları parçası göster. Orta satırları Göster "Tam bir Tablo" ve tıklanma genişleyecektir baştan sona tam bir tablo göstermek gibi metin ile değiştirmek olmalıdır

JQuery bunu yapmak için en iyi yolu nedir?

BTW ben zaten denedim ekleyerek bir sınıf "Table_Middle" bazı satırları ama olmuyor gizle alanı tamamen işgal hala orada ve ben yok metin ver kullanıcı bir şekilde genişletmek tablo tam olarak.

[DEĞİŞTİR] Eklendi Örnek Çalışma HTML Parand ... ... gönderildi cevap esinlenilmiş

Aşağıdaki örnek, tam bir çalışma örneği olduğunu, hatta bir WordPress kullanmak indirmeye gerek yok. Sadece boş bir HTML dosyası içine yapıştırın.

Güzel sadece Javascript kapalı ise, tam bir tablo göstermek düşüyor. Eğer Javascript sonra ise orta tablo satırları gizler ve ekler Göster/Gizle bağlantılar.

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
        <title>Example Show/Hide Middle rows of a table using jQuery</title>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
    	        $("#HiddenRowsNotice").html("<tr><td colspan='2'> <a href='#'>>> some rows hidden <<</a></td></tr>");
    	        $("#ShowHide").html("<tr><td colspan='2'><a href='#'>show/hide middle rows</a></td></tr>");
    	        $("#HiddenRows").hide();

    	        $('#ShowHide,#HiddenRowsNotice').click( function() {
    	            $('#HiddenRows').toggle();	
    		        $('#HiddenRowsNotice').toggle();
    	        });
            });
        </script>
    </head>
    <body>
        <table>
            <tbody id="ShowHide"></tbody>
                <tr><th>Month Name</th><th>Month</th></tr>
            <tbody>
                <tr><td>Jan</td><td>1</td></tr>    
            </tbody>
            <tbody id="HiddenRowsNotice"></tbody>
            <tbody id="HiddenRows">
                <tr><td>Feb</td><td>2</td></tr>
                <tr><td>Mar</td><td>3</td></tr>
                <tr><td>Apr</td><td>4</td></tr>    
            </tbody>
            <tbody>
                <tr><td>May</td><td>5</td></tr>            
            </tbody>
        </table>
    </body>
</html>

[DEĞİŞTİR] blog post ve benim çalışma örnek Link.

CEVAP

18 EKİM 2008, CUMARTESİ

Bu işe yarayabilir gibi bir şey:

<table>
    <tbody>
      <tr><td>Column1</td><td>Column2</td></tr>
      <tr><td>Column1</td><td>Column2</td></tr>
      <tr class="Show_Rows"><td>Start</td><td>Hiding</td></tr>
    </tbody>
    <tbody class="Table_Middle" style="display:none">
      <tr><td>Column1</td><td>Column2</td></tr>
      <tr><td>Column1</td><td>Column2</td></tr>
      <tr><td>Column1</td><td>Column2</td></tr>
    </tbody>
    <tbody>
      <tr class="Show_Rows"><td>End</td><td>Hiding</td></tr>
      <tr><td>Column1</td><td>Column2</td></tr>
      <tr><td>Column1</td><td>Column2</td></tr>
    </tbody>
</table>


$('#something').click( function() {
    $('.Table_Middle').hide();
    $('.Show_Rows').show();
});

$('.Show_Rows').click( function() { 
    $('.Show_Rows').hide();
    $('.Table_Middle').show();
});

Bunu Paylaş: