Hi all:
I've taken my 613 line table, shrunk it to about 10 lines, then obscured
the data so that my sort, and searching don't work on this test.
But anyway, trhe screen *should* show for you, and you might get a
picture of what I'm doing.
My next step is to use CSS (and display:none
to filter the user's
choice. Haven't got to that step yet, but will use Denis McMahon's
suggestions and code from a year ago to do this
Thanks for your suggestions, but I'm now skiing down to my own personal
hell !
I will put on my ski helment though to withstand your comments on my
javascripting
))
-Mel Smith
************ A modified/restricted test version of my Lot Manager
*****************
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Lot Management System (LMS) -- Mesa East Park</title>
<script src="/scripts/handler.js" type="text/javascript"></script>
<style type="text/css" media="screen">
body {
background: greenyellow;
}
div#container {
position: relative;
top: 0px;
height: 510px;
width: 99%;
margin-left: auto;
margin-right: auto;
background: greenyellow;
padding: 2px;
border: 1px solid black;
}
div#headerrow {
position: absolute;
top: 10px;
height: 45px;
width: 910px;
left: 50%;
margin-left: -460px;
margin-bottom: 0px;
padding: 2px;
overflow: auto;
}
div#tableselect {
position: absolute;
top: 57px;
height: 200px;
width: 910px;
left: 50%;
margin-left: -460px;
margin-bottom: 0px;
margin-top: 0px;
padding: 2px;
overflow: auto;
}
div#editfields {
position: absolute;
top: 270px;
height: 150px;
width: 910px;
left: 50%;
margin-left: -455px;
padding: 2px;
/*border: 1px solid black;*/
}
table{ border-collapse: collapse; width: 870px; color: black; margin: auto;}
table, tr, th, td{ border: 1px solid black; }
th{cursor: pointer; background-color: #5898A3; }
tr{background-color:#CDE1E4;}
table#fixedheader {
width: 870px;
table-layout: fixed;
border-collapse: collapse;
color: black;
}
/*
table#t1 {
width: 870px;
table-layout: fixed;
border-collapse: collapse;
color: black;
}
*/
div#buttons {
position: absolute;
bottom: 220px;
width: 300px;
height: 50px;
left: 50%;
margin: 0 0 0 -155px;
color: black;
background: greenyellow;
}
input#flotedit {
top: 0px;
color: black;
background: lightgrey;
}
input#flotreset {
top: 0px;
color: red;
background: lightgrey;
}
div#bottom-left {
position: absolute;
bottom: 10px;
left: 10px;
height: 35px;
color: red;
}
..idnoemph {
color: white;
background: magenta;
}
..pwdemph {
color: white;
background: magenta;
}
div#bottom-right-text {
position: absolute;
background: greenyellow;
font-size: 12px;
font-weight: bold;
right: 2px;
width: 200px;
height: 8px;
bottom: 6px;
padding: 1px;
text-align: right;
}
div#bottom {
position: absolute;
background: greenyellow;
padding: 5px;
width: 850px;
height: 20px;
bottom: 20px;
left: 50%;
margin: 0 0 0 -430px;
border: 1px solid black;
}
</style>
<script type="text/javascript">
//
// If this is a logged in lot owner, scroll to his editable lot data
//
var lSubmit = true ;
var ncommapos ;
var savorder = "L" ; // start off in Lot Order
function chklotid(lot) {
var lotid=document.getElementById(lot);
if (lotid) {
lotid.scrollIntoView();
lotid:focus();
}
}
function scrollTopBot(tb) {
// maybe use this function later to accommodate
// mobile devices without scroll bars
var ord = savorder ;
var el;
switch(ord) {
case "L": {
el = (tb == "T") ? document.getElementById("ilot1") :
document.getElementById("ilot613") ;
el.scrollIntoView() ;
break;
}
case "N": {
break;
}
case "P": {
break;
}
case "S": {
break;
}
}
}
//
// display manipulation according to search order
//
function showwaitmsg() {
var el = document.getElementById("sorttext")
el.style.color="white";
el.style.background="red" ;
el.value = " Sorting ... " ; // in IE, this doesn't display UNLESS you
show an alert first
return ;
}
function showorder(order) {
var el = document.getElementById("sorttext")
el.style.color = "yellow" ;
el.style.background = "gray" ;
var hdrel = document.getElementById("headerstr") ;
if (order === "N" ) {
el.value = "Owner's Name" ;
hdrel.innerHTML = '<span
style="color:yellow;background:gray;"> (Homes in Owner Name
Order) </span>'
}
else if (order === "L" ) {
el.value = "Lot Number" ;
hdrel.innerHTML = '<span
style="color:yellow;background:gray;"> (Homes in Lot Number
Order) </span>'
}
else if (order === "A" ) {
el.value = "Local Street Address" ;
hdrel.innerHTML = '<span
style="color:yellow;background:gray;"> (Homes in Street Address
Order) </span>'
}
else if (order === "P" ) {
el.value = "APN (Parcel No.)" ;
hdrel.innerHTML = '<span
style="color:yellow;background:gray;"> (Homes in Parcel No.
Order) </span>'
}
else el.value = "Faulty Sorting !";
// Now show the search box correctly
//hbrel.style.color = "yellow" ;
//hbrel.style.background = "gray" ;
savorder = order ;
return ;
}
function setfocus(elem) {
var el;
el = document.getElementById(elem);
el.focus();
}
// ==================================================================
//
// Table Sort Functions by Denis McMahon
// (e-mail address removed)
// coded March 2011
//
// ==================================================================
// extract a name from a name cell's innerHTML
function getName(cellText) {
cellText = cellText.replace(/^<b>/,"");
cellText = cellText.replace(/<\/b>$/,"");
return cellText.replace(/&/g,"&");
}
// extract a lot number from a lot cell innerHTML
function getLot(cellText) {
var matches, e;
try {
matches = cellText.match(/\d+/);
if (matches.length === 1) {
return parseInt(matches[0]);
} else {
return 9999999999;
}
} catch (e) {
alert ("unable to extract Lot Number from: '" + cellText + "'");
return 9999999999;
}
}
// extract a parcel from a parcel cell's innerHTML
function getPcl(cellText) {
cellText = cellText.replace(/^<b>/,"");
return cellText.replace(/<\/b>$/,"");
}
// extract a local address from celltext
// expect number street
// normalise to street number
function getAddr(cellText) {
cellText = cellText.replace(/ /,"") ;
cellText = cellText.replace(/<BR> /i," ") ;
cellText = cellText.replace(/<BR>/i," ") ;
cellText = cellText.replace(/[SE]\. /i,"") ;
var re, bits;
if (cellText === " ") {
return "zzzzzzzzzz";
}
re = /(\d+) ([A-Z0-9].*) ?(\d+)?/;
bits = cellText.match(re);
if (bits === null || bits.length < 2 || bits[1] === null || bits[2] ===
null) {
alert ("unable to extract Address from: '" + cellText + "'");
return "zzzzzzzzzz";
}
return bits[2] + " " + bits[1];
}
// lotData is a data object for a member
function lotData(lotno,parcel,addr,occcode,lotstatus,ownname,notes) {
// store the extracted keys that we use for array sorting
this.name = getName(ownname);
this.lot = getLot(lotno);
this.pcl = getPcl(parcel);
this.add = getAddr(addr);
// store the cell contents
this.ownname = ownname;
// now dig out the surname of this top=level owner
ncommapos = this.ownname.indexOf(",")
if (ncommapos > 0 ) {
this.surname = this.ownname.substring(0,ncommapos) ;
} else {
this.surname = this.ownname ;
}
this.addr = addr;
this.lotno = lotno;
this.parcel = parcel;
this.occcode = occcode;
this.lotstatus = lotstatus;
this.notes = notes;
}
// compare two data records by name, ascending order, with null last
function cmpName(x, y) {
if (x.ownname === y.ownname) return 0;
return (x.ownname > y.ownname) ? 1 : -1;
}
// compare two data records by lot, ascending, if an entry is 0 or null it
goes at the end
function cmpLot(x, y) {
if (x.lot === y.lot) return 0;
return (x.lot > y.lot) ? 1 : -1;
}
function cmpPcl(x, y) {
if (x.pcl === y.pcl) return 0;
return (x.pcl > y.pcl) ? 1 : -1;
}
// compare two data records by address, ascending, if an entry is 0 or null
it goes at the end
function cmpAdd(x, y) {
if (x.add === y.add) return 0;
return (x.add > y.add) ? 1 : -1;
}
var allData = new Array();
// extract the data from the table - called from body onload event
function extractTableData() {
var t1, rows, cells, theRow, theCell, theCellData ;
var i,j
var clotno, caddr, cocccode, clotstatus, cownname, cnotes ;
var lotdata;
t1 = document.getElementById("t1");
rows = t1.rows;
// start at '1' below to bypass header of table
for (i = 0; i < rows.length-1; i = i + 1) {
theRow = rows
;
cells = theRow.cells;
clotno = cells[0].innerHTML ;
cparcel= cells[1].innerHTML ;
caddr = cells[2].innerHTML ;
cocccode = cells[3].innerHTML ;
clotstatus = cells[4].innerHTML ;
cownname = cells[5].innerHTML ;
cnotes = cells[6].innerHTML ;
lotdata = new
lotData(clotno,cparcel,caddr,cocccode,clotstatus,cownname,cnotes);
allData.push(lotdata);
clotno = cparcel= caddr = cocccode = clotstatus = cownname = cnotes =
null;
}
}
// build the table from the sorted data
function rebuildTable() {
var t1, theCells,i;
t1 = document.getElementById("t1");
for (i = 0; i < allData.length; i = i + 1) {
theCells = t1.rows.cells ;
theCells[0].innerHTML = allData.lotno;
theCells[1].innerHTML = allData.parcel;
theCells[2].innerHTML = allData.addr;
theCells[3].innerHTML = allData.occcode;
theCells[4].innerHTML = allData.lotstatus;
theCells[5].innerHTML = allData.ownname;
theCells[6].innerHTML = allData.notes;
}
}
// handle sort button click events
function sortName() {
// sort the table by name ascending
showwaitmsg();
setTimeout("sortit(cmpName,'N')",200) ;
}
// handle sort button click events
function sortLot() {
// sort the table by lot ascending
showwaitmsg();
setTimeout("sortit(cmpLot,'L')",200) ;
}
function sortPcl() {
// sort the table by lot ascending
showwaitmsg();
setTimeout("sortit(cmpPcl,'P')",200) ;
}
// handle sort button click events
function sortAddr() {
// sort the table by addr ascending
showwaitmsg();
setTimeout("sortit(cmpAdd,'A')",200) ;
}
function sortit(sortfunc,sortord) {
allData.sort(sortfunc) ;
rebuildTable() ;
showorder(sortord) ;
}
// search for a lot number
// assumes the user types in a number
function findLot(textBox) {
var searchText, i, t1, searchVal;
t1 = document.getElementById("t1");
searchText = textBox.value;
if (searchText === "") {
t1.rows[0].scrollIntoView(true);
return false;
}
searchVal = parseInt(searchText); // convert text to lot number
if (isNaN(searchVal)) { // conversion failure - illegal characters in
textBox?
alert("Sorry, but '" + textBox.value + "' doesn't seem to be a lot
number.");
textBox.value = ""; // empty textBox
t1.rows[0].scrollIntoView(true); // scroll to top of table
return false;
}
for (i = 0; i < allData.length; i = i + 1) {
if (allData.lot === searchVal) {
t1.rows.scrollIntoView(true);
return false;
}
}
alert("Sorry, but '" + textBox.value + "' doesn't match any Lot Number.");
textBox.value = "";
t1.rows[0].scrollIntoView(true);
return false;
}
function findPcl(textBox) {
var searchText, i, t1, searchVal;
var p;
t1 = document.getElementById("t1");
searchText = textBox.value;
if (searchText === "") {
t1.rows[0].scrollIntoView(true);
return false;
}
for (i = 0; i < allData.length; i = i + 1) {
if (allData.parcel.indexOf(searchText) === 0) { // try and match on
start of Parcel Number/Text
t1.rows.scrollIntoView(true);
return false;
}
}
alert("Sorry, but '" + textBox.value + "' doesn't match any APN Number.");
textBox.value = "";
t1.rows[0].scrollIntoView(true);
return false;
}
// search for a name
function findName(textBox) {
var searchText, i, t1, csurname;
t1 = document.getElementById("t1"); // we will want to scroll the table to
the found row
searchText = textBox.value.toLowerCase(); // the text to search for
if (searchText === "") { // search text is empty
t1.rows[0].scrollIntoView(true); // scroll to top of table
return;
}
for (i = 0; i < allData.length; i = i + 1) { // start at the first record
if (allData.surname.toLowerCase().indexOf(searchText) === 0) { // try
and match on start of name text
t1.rows.scrollIntoView(true); // calculate the row to scroll to,
scroll to it
return;
}
}
// if it reaches here, the search term wasn't found
alert("Sorry, but '" + textBox.value + "' doesn't match any Surname."); //
give an alert
textBox.value = ""; // clear the text box
t1.rows[0].scrollIntoView(true); // scroll to top of table
}
// search for an address
// first tries to match on start of field (house numbers) eg "nnnn s. blah"
// then tries to match on whole address eg street names "blah"
function findAddr(textBox) {
var searchText, i, t1,street;
t1 = document.getElementById("t1");
searchText = textBox.value.toLowerCase();
if (searchText === "") {
t1.rows[0].scrollIntoView(true);
return;
}
for (i = 0; i < allData.length; i = i + 1) {
street = allData.add.toLowerCase() ;
if (allData.addr.toLowerCase().indexOf(searchText) === 0) { // try
and match on start of field
t1.rows.scrollIntoView(true);
return;
}
}
for (i = 0; i < allData.length; i = i + 1) {
street = allData.add.toLowerCase() ;
if (allData.addr.toLowerCase().indexOf(searchText) > 0) { // then try
and match anywhere in field
t1.rows.scrollIntoView(true);
return;
}
}
alert("Sorry, but '" + textBox.value + "' doesn't match any address.");
textBox.value = "";
t1.rows[0].scrollIntoView(true);
}
function alltrim(str) {
return str.replace(/^\s+|\s+$/g,"") ;
}
function partof(c,str) {
if (str.indexOf(c) != -1) return true ;
else return false ;
}
function clearFilter(cfilt) {
// This function clears non-needed filters
var checks = document.getElementsByName("homestatus") ;
var lenchecks = checks.length ;
var check ;
if (cfilt == "REST") {
for (var i=1;i<lenchecks;i++) {
check = checks ;
check.checked = false ;
}
}
if (cfilt == "ALL") {
check = checks[0] ;
check.checked = false ;
}
}
function setFilter(cfilt) {
var checks = document.getElementsByName("homestatus") ;
var lenchecks = checks.length ;
var check,clearfilt ;
clearfilt = false ;
if (cfilt == "0") {
return true ;
}
if (cfilt == "ALL") clearfilt = true;
for (var i=0;i<lenchecks;i++) {
check = checks ;
if (clearfilt) {
if (i == 0) check.checked = true ;
else check.checked = false ;
}
else {
}
}
}
function goFilter() {
window.alert("Start filtering Operations now.") ;
}
function setforsrch(cfld,cvalue) {
var el;
lSubmit = false ;
if (cfld === "L") {
sortLot() ;
el = document.getElementById("isrchlot") ;
el.value = cvalue ;
if (cvalue >= "1" && cvalue <= "613")
findLot(document.getElementById("isrchlot")) ;
el.focus() ;
return;
} ;
if (cfld === "P") {
sortPcl() ;
el = document.getElementById("isrchpcl") ;
el.value = cvalue ;
if (cvalue >= "0" && cvalue <= "622")
findPcl(document.getElementById("isrchpcl")) ;
el.focus() ;
return;
} ;
if (cfld === "N") {
sortName() ;
el = document.getElementById("isrchname") ;
el.value = cvalue ;
if (cvalue.toUpperCase() >= "A" && cvalue.toUpperCase() <= "Z")
findName(document.getElementById("isrchname")) ;
el.focus() ;
return;
} ;
if (cfld === "S") {
sortAddr() ;
el = document.getElementById("isrchstreet") ;
el.value = cvalue ;
if (cvalue >= "72" && cvalue.toUpperCase() <= "BRAMBLE")
findAddr(document.getElementById("isrchstreet")) ;
el.focus() ;
return;
} ;
}
function validate() {
return true;
}
// ==================================================================
</script>
</head>
<body
onload="chklotid('ilot1');extractTableData();showorder('L');setFilter('0');setfocus('isrchlot');">
<h3 align="center" style="padding-bottom:2px;margin-bottom:2px;font-family:
sans-serif;"><u>Lot Management System (LMS) -- Mesa East
Park</u></style></h3>
<h4 style="margin-top:0px;margin-bottom:4px;" id="headerstr"
align="center"><span style="color:yellow;background:gray;"> (Homes in
Lot Number Order) </span></h3>
<div id="container">
<form id="ilotmgr" name="lotmgr" action="/cgi-bin/mep/mepinit.exe"
method="post" onsubmit="return validate();">
<input type="hidden" id="mformname" name="formname" value="LOTMGR" />
<div id="headerrow">
<table id="fixedheader" align="left">
<thead>
<tr>
<th align="center" width="6%" ><u>Edit<br />Lot</u></th>
<th align="center" width="5%" ><u>APN</u><br /><span
style="font-size:x-small;color:white;background:black;"> 218-18- </span></th>
<th align="center" width="15%"><u>Street No. /<br
/>Name</u></th>
<th align="center" width="5%"><u>Occ.<br />Code</u></th>
<th align="center" width="8%" ><u>Home<br />Status</u></th>
<th align="center" width="20%" ><u>Owner<br />Surname,
Init</u></th>
<th align="center" width="40%"><u>Away Addresses, Email, &
Notes</u></th>
</tr>
</thead>
</table>
</div>
<div id="tableselect">
<table id="t1" align="left">
<tfoot>
<tr>
<th align="center" width="6%" > </th>
<th align="center" width="5%" > </th>
<th align="center" width="15%"><u>End of Lots</u></th>
<th align="center" width="5%"> </th>
<th align="center" width="8%" > </th>
<th align="center" width="20%" > </th>
<th align="center" width="40%"> </th>
</tr>
</tfoot>
<tbody>
<tr id="ilot99"><td align="center"><input type="submit" id="x99"
size="4" name="lotno" value="99" /></td><td align="center">100</td><td
style="padding-left:5px;">7453 E.<br />Balmoral Ave.</td><td
align="center">OO</td><td align="center"></td><td
style="padding-left:5px;">Pickart, <br />Bryce & Jayne</td><td
style="padding-left:5px;">10812 Clifton Ave, Burnsville, MA 55337</td></tr>
<tr id="ilot100"><td align="center"><input type="submit" id="x100"
size="4" name="lotno" value="100" /></td><td align="center">101</td><td
style="padding-left:5px;">324 S.<br />75th Way</td><td
align="center">OO</td><td align="center"></td><td
style="padding-left:5px;">Shiw, <br />Dotty</td><td
style="padding-left:5px;">Park Regency, PR #1014, 2555 N Sold Rd, Chandler,
AZ 85283</td></tr>
<tr id="ilot101"><td align="center"><input type="submit" id="x101"
size="4" name="lotno" value="101" /></td><td align="center">102</td><td
style="padding-left:5px;">325 S.<br />75th Way</td><td
align="center">OO</td><td align="center"></td><td
style="padding-left:5px;">Smyth, <br
/>Michelle & Suzanne</td><td
style="padding-left:5px;"></td></tr>
<tr id="ilot102"><td align="center"><input type="submit" id="x102"
size="4" name="lotno" value="102" /></td><td align="center">103</td><td
style="padding-left:5px;">326 S.<br />75th Way</td><td
align="center">OO</td><td align="center"></td><td
style="padding-left:5px;">Mungino, <br />Jackohn
Sr., & Theresa</td><td style="padding-left:5px;"></td></tr>
<tr id="ilot103"><td align="center"><input type="submit" id="x103"
size="4" name="lotno" value="103" /></td><td align="center">104</td><td
style="padding-left:5px;">327 S.<br />75th Way</td><td
align="center">OO</td><td align="center"></td><td
style="padding-left:5px;">Mitiska, <br
/>Lennie & Betty</td><td style="padding-left:5px;">PO Box 296,
Turndall, ND 57066</td></tr>
<tr id="ilot104"><td align="center"><input type="submit" id="x104"
size="4" name="lotno" value="104" /></td><td align="center">105</td><td
style="padding-left:5px;">328 S.<br />75th Way</td><td
align="center">OO</td><td align="center"></td><td
style="padding-left:5px;">Hudsen, <br />Girl & Verlyn</td><td
style="padding-left:5px;">940 E. 2nd St., Bridgestone, SD 57420</td></tr>
<tr id="ilot105"><td align="center"><input type="submit" id="x105"
size="4" name="lotno" value="105" /></td><td align="center">106</td><td
style="padding-left:5px;">329 S.<br />75th Way</td><td
align="center">OO</td><td align="center"></td><td
style="padding-left:5px;">Willward, <br />Nanny</td><td
style="padding-left:5px;"></td></tr>
<tr id="ilot106"><td align="center"><input type="submit" id="x106"
size="4" name="lotno" value="106" /></td><td align="center">107</td><td
style="padding-left:5px;">330 S.<br />75th Way</td><td
align="center">OO</td><td align="center"></td><td
style="padding-left:5px;">Summer, <br
/>Raymond & Ethel</td><td style="padding-left:5px;">Box 73,
Clairmont, ID 67512</td></tr>
<tr id="ilot107"><td align="center"><input type="submit" id="x107"
size="4" name="lotno" value="107" /></td><td align="center">108</td><td
style="padding-left:5px;">331 S.<br />75th Way</td><td
align="center">OO</td><td align="center"></td><td
style="padding-left:5px;">Butther, <br />Charlene</td><td
style="padding-left:5px;"></td></tr>
<tr id="ilot613"><td align="center"><input type="submit" id="x613"
size="4" name="lotno" value="613" /></td><td align="center">619</td><td
style="padding-left:5px;">7222 E.<br />Aberate Ave.</td><td
align="center">OO</td><td align="center"></td><td
style="padding-left:5px;">Dickerson, <br />Donnie</td><td
style="padding-left:5px;"></td></tr>
</tbody>
</table>
</div>
</form>
<div id="editfields">
<hr style="color:blue;background:white;" />
Show Lot No. : <input type="text" id="isrchlot" name="srchlot"
size="3" maxlength="3"
onclick="setforsrch('L',this.value);" onkeyup="findLot(this);" value="" />
Show APN No. : <input type="text" id="isrchpcl" name="srchpcl"
size="5" maxlength="4"
onclick="setforsrch('P',this.value);" onkeyup="findPcl(this);" value="" />
Show Surname : <input type="text" id="isrchname"
name="srchname" size="16" maxlength="14"
onclick="setforsrch('N',this.value);" onkeyup="findName(this);" value="" />
Show Street : <input type="text" id="isrchstreet"
name="srchstreet" size="12" maxlength="9"
onclick="setforsrch('S',this.value);" onkeyup="findAddr(this);" value="" />
<br />
<hr style="color:blue;background:white;" />
Check/Uncheck Home Status Options below, then 'Filter' for display
above : <br />
<input type="checkbox" id="ihomestatus0" onclick="clearFilter('REST');"
name="homestatus" value="ALL" checked="checked" />All Homes
<span style="color:red;">OR</span> (
<span style="color:black;font-size:larger;">
<input type="checkbox" id="ihomestatus0" onclick="clearFilter('ALL');"
name="homestatus" value="For Sale" />For Sale
<input type="checkbox" id="ihomestatus1" onclick="clearFilter('ALL');"
name="homestatus" value="Pending" />Pending
<input type="checkbox" id="ihomestatus2" onclick="clearFilter('ALL');"
name="homestatus" value="Sold" />Sold
<input type="checkbox" id="ihomestatus3" onclick="clearFilter('ALL');"
name="homestatus" value="For Rent" />For Rent
<input type="checkbox" id="ihomestatus4" onclick="clearFilter('ALL');"
name="homestatus" value="Rented" />Rented
<input type="checkbox" id="ihomestatus5" onclick="clearFilter('ALL');"
name="homestatus" value="For Lease" />For Lease
<input type="checkbox" id="ihomestatus6" onclick="clearFilter('ALL');"
name="homestatus" value="Leased" />Leased
<input type="checkbox" id="ihomestatus7" onclick="clearFilter('ALL');"
name="homestatus" value="Empty" />Empty
 
<br />
<br />
Click to Start Filtering : <input type="button" value="Filter"
onclick="goFilter();" />
</span>
<hr style="color:blue;background:white;margin-bottom:0px;" />
</div>
<div id="bottom">
Sort by:
<input type="button" style="width:10em;" value="Lot Number"
onclick="sortLot();" />
<input type="button" style="width:10em;" value="APN(Parcel)"
onclick="sortPcl();" />
<input type="button" style="width:11em;" value="Owner's Name"
onclick="sortName();" />
<input type="button" style="width:11em;" value="Local Street Address"
onclick="sortAddr();" />
Sorted: <input type="text" readonly="readonly"
id="sorttext"
style="width:12em;font-weight:bold;color:yellow;background:gray;text-align:center;"value="Who Knows ?" /></div><div id='bottom-right-text'> © 2011 Syntel Data Systems Ltd. </div></div></body></html>