The following code works fine, but I'm trying to make a modification that may not be possible.
<!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
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...
<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?