<!doctype html>
<html>
<head>
<title>Javascript Object Oriented Next Tutorial</title>
<script type="text/javascript">
var ok = 1;
var book_array = [];
var myObject;
var tableObject;
var cur_book = 0;
var lastrow = "";
var lrow = "";
var lasttrow = "";
var TableSpreadsheet = {
init: function(name, collist, rowdata) {
this.name = name;
var tcol = collist.replace(/ /g,"_");
this.precollist = tcol;
this.collist = [];
this.collist = tcol.split(",");
this.rowlist = [];
this.rlist = [];
this.rlist[0] = rowdata;
this.rowlist[0] = tcol;
this.selnumberoptions = "";
this.selstringoptions = "";
this.seloption = [];
this.sqlinfo = [];
this.sqltype = [];
var ijk;
for (ijk=0; ijk<this.collist.length; ijk++) {
this.sqlinfo[ijk] = "";
this.sqltype[ijk] = "string";
this.seloption[ijk] = "";
}
},
putSelstring: function() {
var selc = "<select id='" + this.name + "_sel' onchange=' alert(this.options[this.selectedIndex].innerHTML + \" is \" + eval(this.value)); '><option value=' ok = ok '>Select a spreadsheet function of interest below</option>" + this.selnumberoptions + this.selstringoptions + "</select>";
var oxform = document.getElementById('xform');
oxform.innerHTML = oxform.innerHTML + selc;
},
getCList: function(rdata) {
var ij, clist="", pref="", thj;
var rest2 = rdata.replace(/<\/th>/g,"~");
if (rdata.indexOf("&") !== -1) rest2 = rdata.replace(/<\/th>/g,"~");
var xx, thi = rest2.split("~");
if (thi.length > 1) {
for (ij=1; ij<thi.length; ij++) {
if (thi[ij].replace("</tr>","").replace("</tr>","") != "") clist = clist + pref + thi[ij].replace("<th>","").replace("<tr>","").replace("</th>","").replace("</tr>","").replace("</th>","").replace("</tr>","");
pref = ",";
}
} else {
var rest3 = rdata.replace(/<\/td>/g,"~");
if (rdata.indexOf("&") != -1) rest3 = rdata.replace(/<\/td>/g,"~");
thi = rest3.split("~");
if (thi.length > 1) {
for (ij=1; ij<thi.length; ij++) {
if (thi[ij].indexOf(">") != -1) thj = thi[ij].split(">");
if (thi[ij].indexOf(">") == -1) thj = thi[ij].split(";");
clist = clist + pref + thj[thj.length - 1];
pref = ",";
}
}
}
return clist;
},
mincol: function(colnum) {
var one=0;
var ccolmin = '', ncolmin = 0, prefix = '', canbenumber = 1;
var ij, thiscollist = [];
if (this.rowlist.length >= 2) {
ccolmin = this.rowlist[1];
if (this.rowlist.length >= 3) {
for (ij=1; ij<this.rowlist.length; ij++) {
thiscollist = this.rowlist[ij].split(",");
if (thiscollist[colnum - one] < ccolmin) ccolmin = thiscollist[colnum - one];
prefix = ", ";
try {
if (thiscollist[colnum - one] < ncolmin || ij == 1) ncolmin = thiscollist[colnum - one];
} catch (eee) {
canbenumber = 0;
}
}
}
if (canbenumber == 1) return ncolmin;
}
return ccolmin;
},
maxcol: function(colnum) {
var one=0;
var ccolmax = '', ncolmax = 0, prefix = '', canbenumber = 1;
var ij, thiscollist = [];
if (this.rowlist.length >= 2) {
ccolmax = this.rowlist[1];
if (this.rowlist.length >= 3) {
for (ij=1; ij<this.rowlist.length; ij++) {
thiscollist = this.rowlist[ij].split(",");
if (thiscollist[colnum - one] > ccolmax) ccolmax = thiscollist[colnum - one];
prefix = ", ";
try {
if (thiscollist[colnum - one] > ncolmax || ij == 1) ncolmax = thiscollist[colnum - one];
} catch (eee) {
canbenumber = 0;
}
}
}
if (canbenumber == 1) return ncolmax;
}
return ccolmax;
},
avgcol: function(colnum) {
var one=0;
var ccolavg = '', ncolavg = 0.0, prefix = '', canbenumber = 1, lr = "";
var ij, ji=1, thiscollist = [];
for (ij=1; ij<this.rowlist.length; ij++) {
if (lr != this.rowlist[ij]) {
lr = this.rowlist[ij];
thiscollist = this.rowlist[ij].split(",");
ccolavg = ccolavg + prefix + thiscollist[colnum - one];
prefix = ", ";
try {
if (isNaN(parseFloat(thiscollist[colnum - one]))) {
canbenumber = 0;
} else {
ncolavg = eval(((parseFloat(ji - 1) * parseFloat(ncolavg)) + parseFloat(thiscollist[colnum - one])) / parseFloat(ji));
}
} catch (eee) {
canbenumber = 0;
}
ji = ji + 1;
}
}
if (canbenumber == 1) return ncolavg;
return '';
},
sumcol: function(colnum) {
var one=0;
var ccolsum = '', ncolsum = 0, prefix = '', canbenumber = 1, lr="";
var ij, thiscollist = [];
if (this.seloption[colnum - one] == "") {
this.seloption[colnum - one] = " ";
}
for (ij=1; ij<this.rowlist.length; ij++) {
if (lr != this.rowlist[ij]) {
lr = this.rowlist[ij];
thiscollist = this.rowlist[ij].split(",");
ccolsum = ccolsum + prefix + thiscollist[colnum - one];
prefix = ", ";
try {
if (isNaN(parseFloat(thiscollist[colnum - one]))) {
canbenumber = 0;
} else {
ncolsum = eval(ncolsum + parseFloat(thiscollist[colnum - one]));
if (this.seloption[colnum - one] == " ") {
this.seloption[colnum - one] = "";
this.sqltype[colnum - one] = "number";
this.seloption[colnum - one] = "<option value='tableObject.avgcol(" + (colnum - 0) + ")'>Average " + this.collist[colnum - one].replace("_"," ") + "</option>";
this.seloption[colnum - one] = this.seloption[colnum - one] + "<option value='tableObject.sumcol(" + (colnum - 0) + ")'>Sum " + this.collist[colnum - one].replace("_"," ") + "</option>";
this.selnumberoptions = this.selnumberoptions + this.seloption[colnum - one];
this.selstringoptions = this.selstringoptions + "<option value='tableObject.mincol(" + (colnum - 0) + ")'>Minimum " + this.collist[colnum - one].replace("_"," ") + "</option>";
this.selstringoptions = this.selstringoptions + "<option value='tableObject.maxcol(" + (colnum - 0) + ")'>Maximum " + this.collist[colnum - one].replace("_"," ") + "</option>";
this.seloption[colnum - one] = this.seloption[colnum - one] + "<option value='tableObject.mincol(" + (colnum - 0) + ")'>Minimum " + this.collist[colnum - one].replace("_"," ") + "</option>";
this.seloption[colnum - one] = this.seloption[colnum - one] + "<option value='tableObject.maxcol(" + (colnum - 0) + ")'>Maximum " + this.collist[colnum - one].replace("_"," ") + "</option>";
}
}
} catch (eee) {
canbenumber = 0;
}
}
}
if (this.seloption[colnum - one] == " ") {
this.seloption[colnum - one] = "";
this.selstringoptions = this.selstringoptions + "<option value='tableObject.mincol(" + (colnum - 0) + ")'>Minimum " + this.collist[colnum - one].replace("_"," ") + "</option>";
this.selstringoptions = this.selstringoptions + "<option value='tableObject.maxcol(" + (colnum - 0) + ")'>Maximum " + this.collist[colnum - one].replace("_"," ") + "</option>";
this.seloption[colnum - one] = this.seloption[colnum - one] + "<option value='tableObject.mincol(" + (colnum - 0) + ")'>Minimum " + this.collist[colnum - one].replace("_"," ") + "</option>";
this.seloption[colnum - one] = this.seloption[colnum - one] + "<option value='tableObject.maxcol(" + (colnum - 0) + ")'>Maximum " + this.collist[colnum - one].replace("_"," ") + "</option>";
}
if (canbenumber == 1) return ncolsum;
return ccolsum;
},
addrow: function(rowdata) {
if (rowdata != lastrow) {
this.rlist[this.rlist.length] = rowdata;
this.rowlist[this.rowlist.length] = this.getCList(rowdata);
var ij, xx;
if (this.seloption[0] == "") {
for (ij=0; ij<this.collist.length; ij++) {
xx = this.sumcol(ij);
}
}
lastrow = rowdata;
}
},
};
var Book = {
init: function(title, subtitle, author, published, publishing_date, total_pages, total_chapters, comments) {
this.title = title;
this.subtitle = subtitle;
this.author = author;
this.publishing_date = publishing_date;
this.published = published;
this.total_pages = total_pages;
this.total_chapters = total_chapters;
this.comments = comments;
this.tablename = 'book_table';
},
getCList: function(rdata) {
var ij, clist="", pref="";
var rest2 = rdata.replace(/<th>/g,"~");
var thi = rest2.split("~");
if (thi.length > 1) {
for (ij=1; ij<thi.length; ij++) {
clist = clist + pref + thi[ij].replace("</th>","").replace("</tr>","");
pref = ",";
}
}
return clist;
},
showInfo: function(andmore, tObj) {
var bookb = document.getElementById('book_body');
if (cur_book == 1 && andmore == "more") {
tObj.init(this.tablename, this.getCList(bookb.innerHTML), bookb.innerHTML);
}
var trow = "<tr id='tr" + cur_book + "'><td id='A" + cur_book + "'><a href='#' onclick=' myObject.highlight(" + cur_book + ");' >" + cur_book + "</a></td><td id='B" + cur_book + "'>" + this.title + "</td><td id='C" + cur_book + "'>" + this.subtitle + "</td><td id='D" + cur_book + "'>" + this.author + "</td><td id='E" + cur_book + "'>" + this.published + "</td><td id='F" + cur_book + "'>" + this.publishing_date + "</td><td id='G" + cur_book + "'>" + this.total_pages + "</td><td id='H" + cur_book + "'>" + this.total_chapters + "</td><td id='I" + cur_book + "'>" + this.comments + "</td></tr>"
tObj.addrow(trow);
if (bookb != null) bookb.innerHTML = bookb.innerHTML + trow;
book_array.push({
title: this.title,
subtitle: this.subtitle,
author: this.author,
publishing_date: this.publishing_date,
published: this.published,
total_pages: this.total_pages,
total_chapters: this.total_chapters,
comments: this.comments
});
var obbih = document.getElementById('bbih');
if (obbih != null) obbih.value = bookb.innerHTML;
if (andmore == 'more') this.book_ask(tObj);
},
highlight: function(whichone) {
var thisone = document.getElementById('tr' + whichone);
if (thisone.style.backgroundColor == 'pink') {
thisone.style.backgroundColor = 'white';
} else {
thisone.style.backgroundColor = 'pink';
}
},
book_set: function(inb, ldata, tableObj) {
if (lrow != ldata) {
cur_book = inb;
var cdata = ldata.split(",");
this.init(cdata[0], cdata[1], cdata[2], cdata[3], cdata[4], cdata[5], cdata[6], cdata[7]);
this.showInfo('nomore', tableObj);
lrow = ldata;
}
},
book_ask: function(tObj) {
cur_book = cur_book + 1;
var title = prompt("Please enter your Book " + cur_book + "'s Title (use Cancel to quit)", "");
if (title != null && title != "") {
var subtitle = prompt("Please enter an optional Subtitle for " + title + " (" + cur_book + ")", "");
var author = prompt("Please enter the Author for " + title + " (" + cur_book + ")", "");
var published = prompt("Please enter the Publisher for " + title + " (" + cur_book + ")", "");
var publishing_date = prompt("Please enter the Publishing Date for " + title + " (" + cur_book + ")", "31/12/1960");
var total_pages = prompt("Please enter the Total Pages in " + title + " (" + cur_book + ")", "0");
var total_chapters = prompt("Please enter the Total Chapters in " + title + " (" + cur_book + ")", "0");
var comments = prompt("Please enter Comments for " + title + " (" + cur_book + ")", "");
this.init(title, subtitle, author, published, publishing_date, total_pages, total_chapters, comments);
this.showInfo('more', tObj);
} else {
var formx = document.getElementById('xform');
formx.style.display = 'block';
}
},
piecetogether: function(header, rest, myTs) {
var bookb = document.getElementById('book_body');
this.init('','','','','','','','');
if (bookb != null) {
bookb.innerHTML = header;
}
var obbih = document.getElementById('bbih');
if (obbih != null) obbih.value = header;
myTs.init(myObject.tablename, myTs.getCList(header), header);
if (rest != "") {
var rest2 = rest.replace(/<\/tr>/g,"~");
var ij, rows = rest2.split("~");
for (ij=1; ij<=rows.length; ij++) {
myTs.rlist[this.rlist.length] = "<tr>" + rows[ij - 1];
myTs.rowlist[this.rowlist.length] = this.getCList("<tr>" + rows[ij - 1]);
this.book_set(ij, myTs.getCList("<tr>" + rows[ij - 1]), this);
}
}
},
pieceonerow: function(rest, myTs) {
var rest2 = rest.replace(/<\/tr>/g,"~");
var ij, rows = rest2.split("~");
for (ij=1; ij<=rows.length; ij++) {
myTs.rlist[myTs.rlist.length] = "<tr>" + rows[ij - 1];
myTs.rowlist[myTs.rowlist.length] = myTs.getCList("<tr>" + rows[ij - 1]);
this.book_set(ij, myTs.getCList("<tr>" + rows[ij - 1]), myTs);
}
},
};
myObject = Object.create(Book);
tableObject = Object.create(TableSpreadsheet);
function atstart() {
myObject.book_ask(tableObject);
}
</script>
</head>
<body onload=" atstart(); ">
<div align="center" style="width: 100%;">
<h1>Your Book List (more OOP) goes below ...</h1>
<table id="book_table" border=1 cellpadding=5>
<tbody id="book_body">
<tr style="background-color: yellow;"><th>Book Number</th><th>Title</th><th>Subtitle</th><th>Author</th><th>Published By</th><th>Published Date</th><th>Total Pages</th><th>Total Chapters</th><th>Comments</th></tr>
</tbody>
</table>
</div>
<script> if (document.getElementById('book_body') && document.getElementById('bbih')) { document.getElementById('bbih').value = document.getElementById('book_body').innerHTML; } tableObject.putSelstring(); </script>
</body>
</html>