Steven Munlo said:
Hi Lee,
currently, I have a simple HTML-table (e.g. <tr>/<td>) with some dozen
addresses in alphabetical order. Looks quite nice. But the number of
addresses has grown too much (ok, 114
. Now, I want to slice the list
in several sublists. I think of 26 sublists from 'A' to 'Z'.
I could make a new html-page with 26 characters as some kind of
navigational-bar which I link to the separate sublists. One click on the
char-link opens the corresponding sublist.
But is there a nicer solution? For example, putting the whole address
list inside the html-page, I choose the character for sorting via
drop-down-field and a javascript "constructs" the new html-page
on-the-fly on client side. Is this a good idea? I have no PHP/MYSQL on
the server (which would easen the job). Thanks for your help!
Slow day:
<html>
<head>
<title>Phone List Demo</title>
<script type="text/javascript">
var phonelist= [
// list should be pre-sorted
{ name:"Ableser, Edward", phone: "417-3164" },
{ name:"Aboud, Paula", phone: "417-3166" },
{ name:"Aguirre, Linda", phone: "417-3145" },
{ name:"Allen, Carolyn", phone: "417-3155" },
{ name:"Arzberger, Marsha", phone: "417-3146" },
{ name:"Beer, Timothy", phone: "417-3147" },
{ name:"Bennett, Ken", phone: "926-3429" },
{ name:"Blendu, Robert", phone: "417-3168" },
{ name:"Brotherton, Bill", phone: "926-3429" },
{ name:"Burns, Robert", phone: "417-3225" },
{ name:"Cannell, Robert", phone: "417-3156" },
{ name:"Cheuvront, Ken", phone: "417-3149" },
{ name:"Flake, Jake", phone: "417-3223" },
{ name:"Garcia, Jorge", phone: "417-3162" },
{ name:"Gould, Ron", phone: "417-3165" },
{ name:"Gray, Chuck", phone: "417-3161" },
{ name:"Gray, Linda", phone: "417-3253" },
{ name:"Hale, Albert", phone: "417-3160" },
{ name:"Harper, Jack", phone: "417-3154" },
{ name:"Hellon, Toni", phone: "417-3159" },
{ name:"Huppenthal, John", phone: "417-3157" },
{ name:"Johnson, Karen", phone: "417-3151" },
{ name:"Leff, Barbara", phone: "417-3170" },
{ name:"Martin, Dean", phone: "417-3163" },
{ name:"Miranda, Richard", phone: "417-3171" },
{ name:"Rios, Rebecca", phone: "417-3167" },
{ name:"Soltero, Victor", phone: "417-3169" },
{ name:"Tibshraeny, Jay", phone: "417-3152" },
{ name:"Verschoor, Thayer", phone: "417-3222" },
{ name:"Waring, Jim", phone: "417-3150" }
];
function writeButtons() {
var current="";
for (var i=0;i<phonelist.length;i++) {
if (phonelist
.name.charAt()!=current) {
current=phonelist.name.charAt();
var html="<button onclick=\"showList('"
+current+"')\">"+current+"</button>";
document.write(html);
}
}
}
function showList(letter) {
var html="<table border='1' cellpadding='10'>";
for (var i=0;i<phonelist.length;i++) {
if (phonelist.name.charAt()==letter) {
html+="<tr><td>"+phonelist.name+"</td><td>"
+phonelist.phone+"</td></tr>";
}
}
html+="</table>";
document.getElementById("phonebook").innerHTML=html;
}
</script>
</head>
<body>
<script type="text/javascript">writeButtons(phonelist)</script>
<div id="phonebook"></div>
</body>
</html>
--