Menu
The following code works fine, but I’m trying to make a modification that may not be possible.
[code]
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title> Schedule Display </title>
<script type=”text/javascript”>
var ScedW2014 = [
[ ‘8:00′,”,’!Optics’,”,’!Optics’,’$Faculty’],
[ ‘8:30′,”,’!Lab’,”,’!Lab’,’$Committee’],
[ ‘9:00′,”,’!’,”,’!’,’$Meetings’],
[ ‘9:30′,”,’!’,”,’!’,’$’],
[’10:00′,”,’!Optics’,”,’!Optics’,”],
[’10:30′,”,’!Lab’,”,’!Lab’,”],
[’11:00′,”,’!’,”,’!’,”],
[’11:30′,”,’!’,”,’!’,”],
[’12:00′,’#COP’,”,”,”,”],
[’12:30′,’#’,”,”,”,”],
[ ‘1:00′,’#’,”,”,”,”],
[ ‘1:30′,’#’,”,”,”,”],
[ ‘2:00′,”,’#OTM-4’,”,”,”],
[ ‘2:30′,”,’#Lab’,”,”,”],
[ ‘3:00′,”,’#’,”,”,”],
[ ‘3:30′,”,’#’,”,”,”],
[ ‘4:00′,”,’#’,”,”,”],
[ ‘4:30′,”,’#’,”,”,”],
[ ‘5:00’,”,”,”,”,”]
];
var ScedF2014 = [
[ ‘8:00′,”,”,”,’#OTM-1′,’$Faculty’],
[ ‘8:30′,”,’!Optics’,’!Optics’,’#’,’$Committee’],
[ ‘9:00′,”,’!’,’!’,’#Lab B’,’$Meetings’],
[ ‘9:30′,”,’!Lab B’,’!Lab A’,’#’,’$’],
[’10:00′,”,’!’,’!’,”,”],
[’10:30′,”,’!Optics’,’!Optics’,”,”],
[’11:00′,”,’!’,’!’,”,”],
[’11:30′,”,’!Lab D’,’!Lab C’,”,”],
[’12:00′,’#OTM 1′,’!’,’!’,”,”],
[’12:30′,’#’,”,”,”,”],
[ ‘1:00′,’#’,”,”,”,”],
[ ‘1:30′,’#’,”,”,”,”],
[ ‘2:00′,’@OTM 3’,”,”,”,”],
[ ‘2:30′,’@’,”,”,”,”],
[ ‘3:00′,’@’,”,”,”,”],
[ ‘3:30′,’@’,”,”,”,”],
[ ‘4:00′,’@’,”,”,”,”],
[ ‘4:30′,’@’,”,”,”,”],
[ ‘5:00’,”,”,”,”,”]
];
</script>
</head>
<body>
<select onchange=”ShowSced(this.value)” class=”big”>
<option value=””>Choose Schedule</option>
<option value=”F2014″>Fall 2014</option>
<option value=”W2014″>Winter 2014</option>
</select>
<div id=”tableDIV”></div>
<script type=”text/javascript”>
function $_(IDS) { return document.getElementById(IDS); }
var bgc = [‘#66ff00′,’#cc99ff’,’#ffcccc’,’#cc9900′];
var dayLinks = [
‘http://www.nova.edu/~rumsey/rules.html’,
‘http://www.nova.edu/hpd/otm/gifs/crisis.html’,
‘http://www.nova.edu/hpd/otm/gifs/bhh.GIF’,
‘http://www.nova.edu/hpd/otm/gifs/complaint.html’,
‘http://www.nova.edu/hpd/otm/game/index.html’
];
var ScedCSVheading = [‘Time’,
‘<a href=”‘+dayLinks[0]+'”>Monday</a>’,
‘<a href=”‘+dayLinks[1]+'”>Tuesday</a>’,
‘<a href=”‘+dayLinks[2]+'”>Wednesday</a>’,
‘<a href=”‘+dayLinks[3]+'”>Thursday</a>’,
‘<a href=”‘+dayLinks[4]+'”>Friday</a>’
];
function ShowSced(info) {
var arr = [];
switch (info) {
case ‘W2014’: arr = ScedW2014.slice(0); break;
case ‘F2014’: arr = ScedF2014.slice(0); break;
default: break;
}
var str = ”; if (arr.length != 0) { str = ShowScedCSV(arr); }
$_(‘tableDIV’).innerHTML = str;
}
function ShowScedCSV(ScedCSV) {
var info = [];
info = ScedCSVheading.slice(0);
var str = ‘<table border=”1″>’;
str += ‘<thead><tr style=”background-color:#ffff00″>’;
for (j=0; j<info.length; j++) {
if (j == 0) { str += ‘<th style=”background-color:#ffff00″ width=”50px;”>’+info[j]+’ </th>’; }
else { str += ‘<th style=”background-color:#ffff00″ width=”120px;”>’+info[j]+’ </th>’; }
}
str += ‘</tr></thead>’;
str += ‘<tbody><tr>’;
for (i=0; i<ScedCSV.length; i++) {
info = ScedCSV[i].slice(0);
for (j=0; j<info.length; j++) {
if (j == 0) {
str += ‘<th style=”background-color:#ffff00″>’+info[j]+’ </th>’;
} else {
tmp = info[j]; flg = -1;
if (tmp.charAt(0) == ‘!’) { flg = 0; }
if (tmp.charAt(0) == ‘@’) { flg = 1; }
if (tmp.charAt(0) == ‘#’) { flg = 2; }
if (tmp.charAt(0) == ‘$’) { flg = 3; }
if (flg == -1) {
str += ‘<th>’+tmp+’ </th>’;
} else {
str += ‘<th style=”background-color:’+bgc[flg]+'”>’;
str += tmp.substr(1)+’ </th>’;
}
}
} str += ‘</tr>’;
} str += ‘</tbody></table>’
return str;
}
</script>
</body>
</html>
I use the <select> to determine which scheduling array to display.
onchange of this uses the value to send to the “ShowSced(info)” function.
The ‘info’ parameter is a string, but could it be an array reference instead?
I thought I could accomplish the same effect with
[code]
function ShowSced(arrInfo) { //
var str = ”;
if (arrInfo.length != 0) { str = ShowScedCSV(‘Sced’+arrInfo); } // should form ‘ScedF2014’ or ‘ScedW2014’, but No Good
$_(‘tableDIV’).innerHTML = str;
}
or possibly…
[code]
<select onchange=”ShowSced(this.value)” class=”big”>
<option value=””>Choose Schedule</option>
<option value=ScedF2014>Fall 2014</option> <!– note use of array reference rather than string here –>
<option value=ScedW2014>Winter 2014</option>
</select>
function ShowSced(arrInfo) { //
var str = ”;
if (arrInfo.length != 0) { str = ShowScedCSV(arrInfo); }
$_(‘tableDIV’).innerHTML = str;
}
but neither works.
Is there a way to pass the array to a function based upon the <select> user choice?
Is there a better way to accomplish the effect or is my original example the coding method of choice?