顯示TD表類2分之2山坳

HTML：顯示TD表類2分之2山坳

<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; 
}

我要顯示和隱藏td喜歡此：

TEST1測試2

點擊下一個：測試3測試4

點擊下一個：試驗5試驗6

點擊分組：測試3測試4 。 ..

我在這裏做了一個例子： jsfiddle exemple

謝謝！

來源

2016-06-27 Yoyo

「它的工作痘痘而不是真的」你的問題是不完整的。描述發生了什麼，你想要發生什麼。創建一個可運行的例子 – atmd

謝謝atmd，請問如何創建一個可運行的例子？ – Yoyo

我很困惑x和y應該表示什麼（軸？行？）以及爲什麼一個從0開始，另一個從2開始。 –

i，

是否可以創建一個var來選擇多少col顯示？

的爲例：

$nb_col = 3;

如何整合這個好嗎？

在本例：

runnable exemple

謝謝

來源

2016-06-28 08:25:48 Yoyo

顯示TD表類2分之2山坳

回答

相關問題