2016-06-27 10 views
0

Html:anzeigen td Tabelle mit Klasse 02.02 col

<span></span> 
<table id="myList"> 
    <tr> 
     <td class="td_0">test 1</td><td class="td_1">test 2</td><td class="td_2">test 3</td><td class="td_3">test 4</td><td class="td_4">test 5</td><td class="td_5">test 6</td><td class="td_6">test 7</td><td class="td_7">test 8</td><td class="td_8">test 9</td><td class="td_9">test 10</td><td class="td_10">test 11</td><td class="td_11">test 12</td> 
    </tr> 
    <tr> 
     <td class="td_0">test 1</td><td class="td_1">test 2</td><td class="td_2">test 3</td><td class="td_3">test 4</td><td class="td_4">test 5</td><td class="td_5">test 6</td><td class="td_6">test 7</td><td class="td_7">test 8</td><td class="td_8">test 9</td><td class="td_9">test 10</td><td class="td_10">test 11</td><td class="td_11">test 12</td> 
    </tr> 
    </table> 
    <p></p> 
<div id="loadMore">next 2 col</div> 
<div id="showLess">prev 2 col</div> 

jquery:

$(document).ready(function() { 
    var colCount = 0; 
    $('tr:nth-child(1) td').each(function() { 
     if ($(this).attr('colspan')) { 
      colCount += +$(this).attr('colspan'); 
     } else { 
      colCount++; 
     } 
    }); 

    x=2; 
    y=0; 
    $('.td_0').show(); 
    $('.td_1').show(); 

    $('#loadMore').click(function() { 

     x= (x+2 <= colCount) ? x+2 : colCount; 
     $(".td_"+x).show(); 
     y= (y-2 <= colCount) ? y+2 : colCount; 
     $(".td_"+y).addClass("masquer"); 

     $("span").text("y = " + y + " et x = " + x + " et colonne = " + colCount); 
    }); 

    $('#showLess').click(function() { 
     y= (y-2 <= colCount) ? y-2 : colCount; 
     $(".td_"+y).removeClass("masquer"); 
     x= (x+2 <= colCount) ? x+2 : colCount; 
     $(".td_"+y).hide(); 
     $("p").text("y = " + y + " et x = " + x); 

    }); 

}); 

css:

.td_0 , .td_1 , .td_2 ,.td_3 ,.td_4 ,.td_5 ,.td_6 ,.td_7 ,.td_8 ,.td_9 , .td_10,.td_11 { display:none; 
} 
.masquer { display:none !important; 
} 
.back { display:table-row !important; 
} 

ich zeigen möchte und verstecken Ich mag es dies:

test1 test 2

Klicken Sie auf Weiter: Test 3 Test 4

Klicken Sie auf Weiter: Test 5 Test 6

Klick auf Prev: Test 3 Test 4 . ..

Ich habe hier ein Beispiel ausgeführt: jsfiddle exemple

Vielen Dank!

+0

"eine litle arbeiten, aber nicht wirklich" Ihre Frage ist nicht vollständig. Beschreibe, was passiert ist, was du willst. Erstellen Sie ein lauffähiges Beispiel – atmd

+0

danke atmd, wie machen Sie bitte ein runnable Beispiel? – Yoyo

+0

Ich bin verwirrt, was x und y darstellen sollen (Achsen? Zeilen?) Und warum man bei 0 beginnt und die andere bei 2. –

Antwort

0

i,

ist es möglich, eine var creat wie viele col Show zu wählen?

für exemple:

$nb_col = 3; 

, wie diese Integration bitte?

in diesem exemple:

runnable exemple

danke

Verwandte Themen