<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" type="text/css" href="css/bootstrap.css" /> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> </div> </nav> <div class="col-md-6 well"> <hr style="border-top:1px dotted #ccc;"/> <form> <div class="form-inline"> <select id="key" class="form-control"> </select> </div> </form> <br /> <table class="table table-bordered"> <thead class="alert-info"> <tr> </tr> </thead> </table> </div> </body> </html>
var members = [ {"firstname": "John", "lastname": "Smith", "address": "Tokyo"}, {"firstname": "Claire", "lastname": "Temple", "address": "Racoon City"}, {"firstname": "Natasha", "lastname": "Romanof", "address": "Nazi"} ]; displayData(); function displayData(){ var data = ""; if(members.length > 0){ for(var i=0; i < members.length; i++){ data += "<tr>"; data += "<td>"+members[i].firstname +"</td>"; data += "<td>"+members[i].lastname+"</td>"; data += "<td>"+members[i].address+"</td>"; data += "</tr>"; } } document.getElementById('result').innerHTML = data; } function sort(){ var val=document.getElementById('key').value; switch(val){ case"firstname": if(members.length > 0){ var sortArray = members; sortArray.sort(function(a,b){ if(a.firstname < b.firstname){ return -1; } if(a.firstname > b.firstname){ return 1; } return 0; }); var data = ""; if(members.length > 0){ for(var i=0; i < members.length; i++){ data += "<tr>"; data += "<td>"+members[i].firstname +"</td>"; data += "<td>"+members[i].lastname+"</td>"; data += "<td>"+members[i].address+"</td>"; data += "</tr>"; } } document.getElementById('result').innerHTML = data; } break; case"lastname": if(members.length > 0){ var sortArray = members; sortArray.sort(function(a,b){ if(a.lastname < b.lastname){ return -1; } if(a.lastname > b.lastname){ return 1; } return 0; }); var data = ""; if(members.length > 0){ for(var i=0; i < members.length; i++){ data += "<tr>"; data += "<td>"+members[i].firstname +"</td>"; data += "<td>"+members[i].lastname+"</td>"; data += "<td>"+members[i].address+"</td>"; data += "</tr>"; } } document.getElementById('result').innerHTML = data; } break; case"address": if(members.length > 0){ var sortArray = members; sortArray.sort(function(a,b){ if(a.address < b.address){ return -1; } if(a.address > b.address){ return 1; } return 0; }); var data = ""; if(members.length > 0){ for(var i=0; i < members.length; i++){ data += "<tr>"; data += "<td>"+members[i].firstname +"</td>"; data += "<td>"+members[i].lastname+"</td>"; data += "<td>"+members[i].address+"</td>"; data += "</tr>"; } } document.getElementById('result').innerHTML = data; } break; } }