Question

我试图只显示两行。现在有四行显示。我想只显示两个并隐藏两个。并单击时添加一个按钮以显示其余两个。我是前端的新人。有人可以帮助我吗？

$.each(data, function(i, k) {
  bind += '<div class="first">';
  bind += '<div class="second">';
  bind += '<table>';    
  bind += '<tr><th>Id</th>' + '<td>' + k.id + '</td></tr>';
  bind += '<tr><th> Name</th>' + '<td>' + k.name + '</td></tr>';
  bind += '<tr><th>Addresss</th>' + '<td>' + k.address + '</td></tr>';
  bind += '<tr><th>Phone</th>' + '<td>' + k.phone + '</td></tr>';
  bind += '</table></div></div>';
});

Answer 1

为每对添加两组类并切换。 html看起来像这样

<table>
    <tr></tr>
    <tr></tr>
    <tr class="set2"></tr>
    <tr class="set2"></tr>
</table>

并且javascript将是（假设按钮具有名为btn的id）

$(".set2").hide();
$("#btn").click(function(){
   $(".set2").show();
});

Answer 2

您可以使用显示无创建类隐藏：

.hide { display: none }

添加您不想显示的行，当然，当用户点击，我不知道，显示按钮时，您从行中删除该类。

Answer 3

你可以输入一个计数器变量。

var counter = 0;
$.each(data, function(i, k) {
    if(counter < 2) {
        //render your html
    }
    counter++;
)}

隐藏和显示表格数据

3 个答案: