我刚制作了一个有120行的表，我打算在底部放置页码让用户选择，我想在一个页面中显示15行，当用户点击第二页时，行应该被新的15行替换
<div class="full" >
<table class="flat-table flat-table-2" width="70%" style="margin:auto;">
<tr><th>numbers</th><th>address</th></tr>
<div id="page1">
<tr><td>3</td><td><a href="#">test</a></td></tr>
<tr><td>5</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
</div>
<div id="page2">
<tr><td>3</td><td><a href="#">test</a></td></tr>
<tr><td>5</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
</div>
<div id="page3">
<tr><td>3</td><td><a href="#">test</a></td></tr>
<tr><td>5</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
<tr><td>1</td><td><a href="#">test</a></td></tr>
</div>
</table>
<div class="footer-pop">
<a href= "3" id="page3"class="pages">3</a>
<a href= "2" id="page2"class="pages">2</a>
<a href="1" id="page1"class="pages">1</a>
</div>
</div>
先谢谢
答案 0 :(得分：2)
当你给所有divs类“pages”时，下面的代码应该有效，每个按钮应该有一个页面。
并给予
$('.footer-pop a').click( function(){
var self = $(this);
$('div.pages').hide();
$('div.pages').eq(self.index() +1 ).show()
});
我没试过的任何方式..请检查
答案 1 :(得分：0)
这是我使用jQuery，并编辑一些HTML。
<强> HTML
<div class="full" >
<table class="flat-table flat-table-2" width="70%" style="margin:auto;">
<tr><th>numbers</th><th>address</th></tr>
<tr class="page1"><td>3</td><td><a href="#">test</a></td></tr>
<tr class="page1"><td>5</td><td><a href="#">test</a></td></tr>
<tr class="page1"><td>1</td><td><a href="#">test</a></td></tr>
.......
<强>的jQuery
$(function(){
$('.footer-pop a').on('click', function(e){
e.preventDefault();
$('tr[class^="page"]').hide();
$('tr.' + $(this).attr('data-tr')).show();
});
});
答案 2 :(得分：0)
你有两个问题。表格中包含div的html无效，并且您有多个具有相同ID的元素。只需使用带有thead的多个tbody元素
<强> HTML
<div class="full">
<table class="flat-table flat-table-2" width="70%" style="margin:auto;">
<thead>
<tr>
<th>numbers</th>
<th>address</th>
</tr>
</thead>
<tbody id="page1">
<tr>
<td>1-3</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>5</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
</tbody>
<tbody id="page2" class="hidden">
<tr>
<td>2-3</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>5</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
</tbody>
<tbody id="page3" class="hidden">
<tr>
<td>3-3</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>5</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
<tr>
<td>1</td>
<td><a href="#">test</a>
</td>
</tr>
</tbody>
</table>
<div class="footer-pop">
<a href= "#" data-id="page3"class="pages">3</a>
<a href= "#" data-id="page2"class="pages">2</a>
<a href="#" data-id="page1"class="pages">1</a>
</div>
</div>
<强>的JavaScript
$(".footer-pop").on("click", "a.pages", function (evt) {
evt.preventDefault();
var id = "#" + $(this).data("id");
$("table").find("tbody").addClass("hidden").filter(id).removeClass("hidden");
});
<强> CSS
.hidden { display:none; }
<强>小提琴