<!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;"/> <div class="col-md-4"> <div class="form-group"> <input type="text" id="firstname" class="form-control"/> </div> <div class="form-group"> <input type="text" id="lastname" class="form-control"/> </div> </div> <div class="col-md-8"> <table class="table table-bordered"> <thead class="alert-info"> <tr> </tr> </thead> </table> </div> </div> </body> </html>
var members = []; 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 += "</tr>"; } } document.getElementById('result').innerHTML = data; } function addMember(){ var firstname = document.getElementById('firstname'); var lastname = document.getElementById('lastname'); if(firstname.value == "" || lastname.value == ""){ alert("Please enter something first!"); }else{ var str = '{"firstname": "'+firstname.value+'", "lastname": "'+lastname.value+'"}'; var json = JSON.parse(str); members.push(json); displayData(); firstname.value = ""; lastname.value = ""; } } function sortColumn(sort){ if(members.length > 0){ var sortArray = members; switch(sort){ case "ascf": sortArray.sort(function(a,b){ if(a.firstname < b.firstname){ return -1; } if(a.firstname > b.firstname){ return 1; } return 0; }); displayData(); break; case "descf": sortArray.sort(function(a,b){ if(a.firstname > b.firstname){ return -1; } else if(a.firstname < b.firstname){ return 1; }else{ return 0; } }); displayData(); break; case "ascl": sortArray.sort(function(a,b){ if(a.lastname < b.lastname){ return -1; } if(a.lastname > b.lastname){ return 1; } return 0; }); displayData(); break; case "descl": sortArray.sort(function(a,b){ if(a.lastname > b.lastname){ return -1; } else if(a.lastname < b.lastname){ return 1; }else{ return 0; } }); displayData(); break; } } }