-3

I am trying to show only two row. Right now there are four rows displayed. I want to show only two and hide two. And add a button to show rest two when clicked. I am new in front end. Can someone help me in this?

$.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>';
});
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
user3557656
  • 7
  • 7
  • 6
    Have you written some code that doesn't work that we can fix or are you asking for the answer? – atmd Oct 11 '17 at 13:11
  • Add a class to your last `` and toggle it. The class then is just set to `display: none;` – lumio Oct 11 '17 at 13:12

3 Answers3

2

Add two sets of classes for each pair and toggle the. The html would look something like this

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

And the javascript would be(assuming button has id named btn)

$(".set2").hide();
$("#btn").click(function(){
   $(".set2").show();
});
Aparajit P Utpat
  • 375
  • 3
  • 14
0

You can create a class hide with display none:

.hide { display: none }

Add in the rows you don't wanna show, of course and when the user click on the, I don't know, Show Button, you remove that class from the lines.

Jeff Gouveia
  • 1
  • 1
  • 2
0

You can just put in a counter variable.

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