Question

Html：

    <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 test 2

点击下一步：测试3测试4

点击下一步：测试5测试6

点击上一页：测试3测试4 ...

我在这里运行了一个例子： jsfiddle exemple

谢谢！

Answer 1

I，

是否可以创建一个var来选择col show多少？

例如：

$nb_col = 3;

如何整合这个？

在这个例子中：

runnable exemple

谢谢

显示类2/2 col的td表

1 个答案: