Menu
Community /Pin to ProfileBookmark
[RESOLVED] External JS file load or reference difficulty
I have three files in the same directory. They are ‘proTable.html’, ‘proTable.js’ and ‘table.css’ and are shown below.
When the JS file is used externally with a <script> tag
<script type=”text/javascript” src=”proTable.js”></script>
I get only a 3 line display. ?
When the JS file is copied and pasted over where the above <script> is located,
all displays on the screen as desired. ?
I use:
<script type=”text/javascript”>
// contents of external JS file ‘proTable.js’ is pasted here when ‘src=”proTable.js”‘ removed
</script>
I have tried loading the external file before the </head>, before the </body>
both before and after the display testing <script> code.
Has anyone any idea as to what I am doing wrong? ?
I am at a lost as to why the external JS file load does not work the same as the in-line version.
The files I am using are:
CSS file: ‘table.css’
[code]
/* table.css */
/* Defined in HTML source file
#tblContainer3 { display: table; width:50%; }
#tblContainer2 { display: table; width:40%; }
#tblContainer { display: table; width:60%; border:1px solid; }
*/
.tblHead { display: table-row; text-align:center; background-Color:#c0c0c0; }
.tblFoot { display: table-row; text-align:center; background-Color:#e0ffe0; font-weight:bold; }
.tblRow { display: table-row; }
.tblCell { display: table-cell; padding:3px; border:1px solid; }
.tblLeft { display: table-cell; padding:3px; border:1px solid; width:20%; }
.tblMiddle { display: table-cell; padding:3px; border:1px solid; }
.tblRight { display: table-cell; padding:3px; border:1px solid; width:30%; }
JS file: ‘proTable.js’
[code]
// proTable.js
// Requires CSS definitions in table.css
function isEmpty(val) { return !val; }
// function returns true if val is: empty, null, undefined, false, the number 0 or NaN.
Array.prototype.toCSStable = function(Head,Foot) {
Array.prototype.setRow = function() {
return this.map( function(a) { return ‘<div class=”tblCell”>’+a+'</div>’; } ).join(”);
}
var CSStable = this.slice(0);
var Footer = ”, str = ”;
if ( ! isEmpty(Head) ) { str = ‘<div class=”tblHead”>’+CSStable.shift().setRow()+'</div>’; }
if ( ! isEmpty(Foot) ) { Footer = ‘<div class=”tblFoot”>’+CSStable.pop().setRow()+'</div>’; }
for (var r=0; r<CSStable.length; r++) { str += ‘<div class=”tblRow”>’+CSStable[r].setRow()+'</div>’; }
if (Footer != ”) { str += Footer; }
return str;
}
Array.prototype.toCSStable3 = function(Head,Foot) {
Array.prototype.setRow = function() {
var strline = ‘<div class=”tblLeft”>’+this[0]+'</div>’;
strline += ‘<div class=”tblMiddle”>’+this[1]+'</div>’;
strline += ‘<div class=”tblRight”>’+this[2]+'</div>’;
return strline;
}
var CSStable = this.slice(0);
var Footer = ”, str = ”;
if ( ! isEmpty(Head) ) { str = ‘<div class=”tblHead”>’+CSStable.shift().setRow()+'</div>’; }
if ( ! isEmpty(Foot) ) { Footer = ‘<div class=”tblFoot”>’+CSStable.pop().setRow()+'</div>’; }
for (var r=0; r<CSStable.length; r++) { str += ‘<div class=”tblRow”>’+CSStable[r].setRow()+'</div>’; }
if (Footer != ”) { str += Footer; }
return str;
}
HTML file: ‘proTable.html’
[code]
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title> toCSStable </title>
<link href=”table.css” rel=”stylesheet” type=”text/css”>
<style type=”text/css”>
#tblContainer3 { display: table; width:50%; }
#tblContainer2 { display: table; width:40%; }
#tblContainer { display: table; width:60%; border:1px solid; }
</style>
</head>
<body>
<h3>Table 1</h3> <div id=”tblContainer”></div>
<h3>Table 2</h3> <div id=”tblContainer2″></div>
<h3>Other Table Examples </h3> <div id=”tblContainer3″></div>
<script type=”text/script” src=”proTable.js”></script>
<script type=”text/javascript”>
var tblInfo = [
[‘<b>Left Col Header</b>’,'<b>Col-1 Header</b>’,'<b>Col-2 Header</b>’,'<b>Right Col Header</b>’],
[‘<p>Contents of the left column of the 1st row</p>’,
‘<p>Contents of column 1 of the 1st row</p>’,
‘<p>Contents of column 2 of the 1st row</p>’,
‘<p>Contents of the right column of the 1st row</p>’],
[‘Contents of the left column of the 2nd row’,
‘Contents of column 2 of the 2nd row’,
‘Contents of column 2 of the 2nd row</p>’,
‘Contents of the right column of the 2nd row’],
[‘Left Col Footer’,’Col-1 Footer’,’Col-2 Footer’,’Right Col Footer’],
];
var tblInfo2 = [
[‘<b>Left Col Header</b>’,'<b>Middle Column Header</b>’,'<b>Right Col Header</b>’],
[‘<p>Contents of the left column of the 1st row</p>’,
‘<p>Contents of middle column of the 1st row</p>’,
‘<p>Contents of the right column of the 1st row</p>’],
[‘Contents of the left column of the 2nd row’,
‘Contents of middle column of the 2nd row’,
‘Contents of the right column of the 2nd row’],
[‘Left Col Footer’,’Middle Column Footer’,’Right Col Footer’],
];
window.onload = function() {
document.getElementById(‘tblContainer’).innerHTML = tblInfo.toCSStable(true,true);
document.getElementById(‘tblContainer2’).innerHTML = tblInfo.toCSStable();
document.getElementById(‘tblContainer3′).innerHTML += tblInfo2.toCSStable3(true,false)+'<p />’;
document.getElementById(‘tblContainer3′).innerHTML += tblInfo2.toCSStable3(false,true)+'<p />’;
document.getElementById(‘tblContainer3′).innerHTML += tblInfo2.toCSStable3(false,false)+'<p />’;
}
</script>
</body>
</html>
Sign in
to post a comment