Hi Everyone,
I have a multidimensional array which shows each individual array value on the screen. Whenever a user clicks on the "next person" button, it will show the next array value.
Everything is working fine and dandy. You can just copy the code and fire it up in your webbrowser to see how it works.
I just think that it's a bit cluttered IMO. There has to be a prettier/more concise way. Any suggestions/comments are welcome.
Thanks in advance!
- Jermaine
html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> </head> <body> <button class="prev_person">Show Previous Person</button> <button class="next_person">Show Next Person</button> <div id="my_div"></div> <script type="text/javascript"> var people = [["John", "25yrs", "155lbs"], ["Mike", "32yrs", "200lbs"]]; var row = 0; show_records(); function show_records() { if (row + 1 == people.length) { $(".next_person").attr('disabled', true); } else { $(".next_person").attr('disabled', false); } if (row <= 0) { $(".prev_person").attr('disabled', true); } else { $(".prev_person").attr('disabled', false); } var col = people[row].length; for (i=0; i < col; i++) { $("#my_div").append("<div class='person'>" + people[row][i] + "</div>"); } } $(function() { $('.next_person').click(function() { row++; $('div').remove('.person'); show_records(); }); $('.prev_person').click(function() { row--; $('div').remove('.person'); show_records(); }); }); </script> </body> </html>