如何在点击事件中使用javascript / jquery逐个获取json中的数据？

Question

I have the working code which fetches all the records from the json, but how can I make the records available one by one on the click of the button(next/previous)?

The following code is working to fetch all the records:

    div
    {
        text-align:center;
        padding:10px;
    }

    #msg {
        width: 500px;
        margin: 0px auto;
    }
    .members {
        width: 500px ;
        background-color: beige;
    }

<input type="button" name="next" id="next"><br/>
<input type="button" name="previous" id="previous"><br/>


<div id="msg">
<table id="userdata" border="1">
    <thead>
        <th>Email</th>
        <th>Sex</th>
        <th>Location</th>
        <th>Picture</th> 
        <th>audio</th> 
        <th>video</th> 
    </thead>
    <tbody></tbody>
</table>
</div>

    $(document).ready(function(){
        var url="json.php";
        $("#userdata tbody").html("");
        $.getJSON(url,function(data){
            $.each(data.members, function(i,user){
                var tblRow =
                    "<tr>"
                    +"<td>"+user.email+"</td>"
                    +"<td>"+user.sex+"</td>"
                    +"<td>"+user.location+"</td>"
                    +"<td>"+"<img src="+user.image+">"+"</td>"
                    +"<td>"+"<audio src="+user.video+" controls>"+"</td>"
                    +"<td>"+"<video src="+user.video+" controls>"+"</td>"
                    +"</tr>" ;
                $(tblRow).appendTo("#userdata tbody");
            });
        });
    });

Answer 1

HTML

<input type="button" name="next" id="next" value="NEXT" />
<br/>
<input type="button" name="previous" id="previous" value="PREV" />
<br/>
<div id="msg">
    <table id="userdata" border="1">
        <thead>
            <th>Email</th>
            <th>Sex</th>
            <th>Location</th>
            <th>Picture</th>
            <th>audio</th>
            <th>video</th>
        </thead>
        <tbody></tbody>
    </table>
</div>

SCRIPT

var users = [];
var idx = 0;
var renderRow = function (idx) {
    var user = users[idx];
    var tblRow = "<tr>" + "<td>" + user.email + "</td>" + "<td>" + user.sex + "</td>" + "<td>" + user.location + "</td>" + "<td>" + "<img src=" + user.image + ">" + "</td>" + "<td>" + "<audio src=" + user.video + " controls>" + "</td>" + "<td>" + "<video src=" + user.video + " controls>" + "</td>" + "</tr>";
    $('#userdata tbody').html(tblRow);
};
var url = "json.php";
$.getJSON(url, function (data) {
    users = data.members;
    renderRow(idx);
    $('#next').click(function() {
        idx++;
        if (idx > (users.length - 1)) idx = (users.length - 1);
        renderRow(idx);
    });
    $('#previous').click(function() {
        idx--;
        if (idx < 0) idx = 0;
        renderRow(idx);
    });
});