I only added the JS files to this post, but this assignment is a report table that is sorted using JS. Somehow the arrow/sorters are not showing up in any browser. This assignment is due later tonight and I spent hours trying to sort out issues. I thought you can code the sort/arrows using JS, but somehow they are showing up as broken links/images. It is supposed to look like this:
我只在这篇文章中添加了JS文件,但是这个赋值是一个使用JS排序的报表。不知何故,箭头/分拣机没有出现在任何浏览器中。这项任务将在今晚晚些时候到期,我花了几个小时试图解决问题。我以为你可以使用JS编写排序/箭头,但不知怎的,它们显示为断开的链接/图像。它应该看起来像这样:
//Create a new object called TableSort that takes two parameters: tableId and lastRow
var TableSort = function ( tableId, lastRow ) {
//the value of the variable that is this
var that = this;
//if less than 2 arguments are passed to the TableSort object
if ( arguments.length < 2) {
//the value of lastRow is true
lastRow = true;
}
//the value of the table property of the the TableSort object is the value of the id element represented by the value of tableId
this.table = document.getElementById(tableId);
//if the table parameter exists and it does not have a node type of 1
if ( this.table && this.table.nodeType != 1 ) {
//throw a new error that says "TableSort: Table id is not a DOM element."
throw new Error("TableSort: Table id is not a DOM element.");
}
//if the tagname property of the table property is not TABLE
if ( this.table.tagName != "TABLE" ) {
//throw a new error that says "TableSort: Table id is not a table element."
throw new Error("TableSort: Table id is not a table element.");
}
//the value of the sortColumn property of the TableSort object is an empty string
this.sortColumn = "";
//the value of the sortUp property of the TableSort object is true
this.sortUp = true;
//the value of the imageNodes property of the TableSort object is an empty array
this.imageNodes = [];
//the value of the lastRow property of the TableSort object is the value of lastRow
this.lastRow = lastRow;
//the value of the variable headers is an array of the th tags in the table
var headers = this.table.getElementsByTagName("th");
//create variables called header, columnName, imageNode, and imageClick
var header, columnName, imageNode, imageClick;
//create a for loop where the variable i is equal to 0, it continues to run while the value of i is less than the length of the headers array, and i increments by one on each loop
for ( var i = 0; i < headers.length; i++) {
//the value of header is the item in the headers array represented by i
header = headers[i];
//the value of imageNode is a new "img" element
imageNode = document.createElement("img");
//the value of columnName is the className property of header
columnName = header.className;
//if i equals 0
if ( i == 0 ) {
//the value of the sortColumn property of the TableSort object is the value of columnName
this.sortColumn = columnName;
//the src property of imageNode is "arrows_up.png"
imageNode.src = "arrows_up.png";
//otherwise
} else {
//the src property of imageNode is "arrows_off.png"
imageNode.src = "arrows_off.png";
}
//the value of imageClick is the imageClickHandler method of the TableSort object with the parameter of columnName
imageClick = this.imageClickHandler(columnName);
//execute the add method of the jsLib event object with the parameters of imageNode, "click", and imageClick
jsLib.event.add(imageNode, "click", imageClick);
//execute the appendChild method of header with a parameter of imageNode
header.appendChild(imageNode);
//the value of the columnName item in the imageNodes array property of the TableSort object is the value of imageNode
this.imageNodes[columnName] = imageNode;
}
//execute the sort method of the TableSort object
this.sort();
}
//the imageClickHandler metho of the TableSort object is a function with one parameter: columnName
TableSort.prototype.imageClickHandler = function (columnName) {
//the value of the variable that is this
var that = this;
//return the following function
return function () {
//if the sortColumn property of that equals the value of columnName
if ( that.sortColumn == columnName ) {
//toggle the sortUp property of the that object
that.sortUp = ! that.sortUp;
// otherwise
} else {
//the src property of the that.sortColumn item in the imageNodes array is "arrows_off.png"
that.imageNodes[that.sortColumn].src = "arrows_off.png";
//the value of the sortColumn property of that is the value of ColumnName
that.sortColumn = columnName;
//the value of the sortUp property of the that object is true
that.sortUp = true;
}
//if the sortUp property of that has a value of true
if ( that.sortUp ) {
//the src property of the that.sortColumn item in the imageNodes array is "arrows_up.png"
that.imageNodes[that.sortColumn].src = "arrows_up.png";
} else {
//the src property of the that.sortColumn item in the imageNodes array is "arrows_down.png"
that.imageNodes[that.sortColumn].src = "arrows_down.png";
}
//execute the sort method of the that object
that.sort();
}
}
//the sort method of the TableSort object is defined as
TableSort.prototype.sort = function () {
//the value of the variable that is this
var that = this;
//if the sortColumn property of the TableSort object is an empty string, return to the calling function
if ( this.sortColumn == "" ) return;
//the value of the variable rowNodes is an array of the tr tags in the table
var rowNodes = this.table.getElementsByTagName("tr");
//if the length of the rowNodes array is equal to or less than 1, return to the calling function
if (rowNodes.length <= 1 ) return;
//the value of the variable rows is an empty array
var rows = [];
//create a for loop where i equals zero, the for loop runs as long as the value of i is less than the length of the rowNodes array, and i increments by 1 each time
for ( var i = 0; i < rowNodes.length; i++) {
//add the item in the rowNodes array represented by the number i to the end of the rows array.
rows.push( rowNodes[i] );
}
//the value of the variable tbodyNode is the parentNode of the first item in the rows array
var tbodyNode = rows[0].parentNode;
//remove the first item from the rows array
rows.shift();
//if the value of the lastRow property of the that object is false
if ( that.lastRow == false ) {
//the value of the variable totalsRow is the last item in the rows array
var totalsRow = rows[rows.length - 1];
//remove the row represented by totalsRow from the tbodyNode
totalsRow.parentNode.removeChild(totalsRow);
//remove the last item from the rows array
rows.pop();
}
//the variable isDate is a function with one parameter: value
var isDate = function ( value ) {
//the variable d is a new instance of the Date object with a parameter of value
var d = new Date(value);
//return true if value can be converted to a date
return ! isNaN(d);
}
//the variable isMoney is a function with one parameter: value
var isMoney = function ( value ) {
//the value of the variable m is the replace method of value with the parameters /[$,]/g and an empty string
var m = value.replace( /[$,]/g, "" );
//return true if value is a text string that can be turned into a number
return ! isNaN(m);
}
//the value of the variable direction is 1 if the value of the sortUp property of that is true or -1 if it is false
var direction = ( that.sortUp ) ? 1 : -1;
//sortRows is a function with the parameters rowA and rowB
var sortRows = function (rowA, rowB) {
//create the new variables i, textA, textB, valueA, and valueB
var i, textA, textB, valueA, valueB;
//create the variable cell
var cell;
//the value of the variable cellsA is an array of the td tags from rowA
var cellsA = rowA.getElementsByTagName("td");
//create a for loop where i equals 0, the loop runs while i is less than the length of the cellsA array, and i increments by 1 on each loop
for ( i = 0; i < cellsA.length; i++ ) {
//the value of cell is the value of the item represented by i in the cellsA array
cell = cellsA[i];
//if the value of the className property of cell equals the value of the sortColumn property of that
if ( cell.className == that.sortColumn ) {
//the value of valueA is the firstChild nodeValue of cell
valueA = cell.firstChild.nodeValue;
//end the function
break;
}
}
//the value of the variable cellsB is an array of the td tags from rowB
var cellsB = rowB.getElementsByTagName("td");
//create a for loop where i equals 0, the loop runs while i is less than the length of the cellsB array, and i increments by 1 on each loop
for ( i = 0; i < cellsB.length; i++ ) {
//the value of cell is the value of the item represented by i in the cellsB array
cell = cellsB[i];
//if the value of the className property of cell equals the value of the sortColumn property of that
if ( cell.className == that.sortColumn ) {
//the value of valueB is the firstChild nodeValue of cell
valueB = cell.firstChild.nodeValue;
//end the function
break;
}
}
//if valueA and valueB are numbers
if ( ! isNaN(valueA) && ! isNaN(valueB) ) {
//the value of valueA is valueA converted to a number with decimal places
valueA = parseFloat(valueA);
//the value of valueB is valueB converted to a number with decimal places
valueB = parseFloat(valueB);
//otherwise, if valueA and valueB can be converted to dates
} else if ( isDate(valueA) && isDate(valueB) ) {
//the value of valueA is a new date object with the parameter of valueA
valueA = new Date(valueA);
//the value of valueB is a new date object with the parameter of valueB
valueB = new Date(valueB);
//otherwise, if valueA and valueB are money values
} else if ( isMoney(valueA) && isMoney(valueB) ) {
//the value of valueA is valueA converted to a number with decimal places that has the dollar signs and commas replaced with empty strings
valueA = parseFloat(valueA.replace( /[$,]/g, "" ));
//the value of valueB is valueB converted to a number with decimal places that has the dollar signs and commas replaced with empty strings
valueB = parseFloat(valueB.replace( /[$,]/g, "" ));
}
//if the value of valueA is less than the value of valueB
if ( valueA < valueB ) {
//return -1 multiplied by the value of direction
return -1 * direction;
//otherwise if the value of valueB is less than the value of valueA
} else if ( valueB < valueA ) {
//return 1 multiplied by the value of direction
return 1 * direction;
//otherwise
} else {
//return the number 0
return 0;
}
}
//execute the sort method of the rows array with the parameter of the function sortRows
rows.sort( sortRows );
//create a for loop where i equals 0, the loop continues as long as the value of i is less than the length of the rows array, and the value of i is incremented each time through the loop
for ( i = 0; i < rows.length; i++) {
//execute the appendChild method of tbodyNode with the parameter of the item in the rows array represented by i
tbodyNode.appendChild( rows[i] );
}
//if totalsRow exists in this object
if (totalsRow) {
//execute the insertBefore method of the tbodyNode with the parameters of totalsRow and rows[rows.length]
//tbodyNode.insertBefore( totalsRow, rows[rows.length] ); //that doesn't work with internet explorer, so I changed it to the code below
tbodyNode.appendChild( totalsRow );
}
}//if the jsLib object doesn't exist
if ( ! jsLib ) {
//create a new object named jsLib
var jsLib = {};
}
//if the event object doesn't exist in the jsLib object
if ( ! jsLib.event ) {
//create a new object in the jsLib object named event
jsLib.event = {};
}
//the handlerId property of the event property is 1
jsLib.event.handlerId = 1;
//the add method of the event object takes three parameters: element, type, handler
jsLib.event.add = function (element, type, handler) {
//if handlerid property of handler doesn't exist
if (!handler.handlerId) {
//the handlerId property of handler is the handlerId property of the event property incremented by 1
handler.handlerId = jsLib.event.handlerId++;
}
//the value of the variable oldHandlerName is "jsLib_old_" plus the value of type plus the value of the handlerId property of handler
var oldHandlerName = "jsLib_old_" + type + "_" + handler.handlerId;
//the value of the variable newHandlerName is "jsLib_new_" plus the value of type plus the value of the handlerId property of handler
var newHandlerName = "jsLib_new_" + type + "_" + handler.handlerId;
//if element has the addEventListener method
if ( element.addEventListener ) {
//the value of the oldHandlerName item within element is the value handler
element[oldHandlerName] = handler;
//the value of the newHandlerName item within element is a new event handler
element[newHandlerName] = function(evt) {
//use the fixEvent method to standardize the old event handler
element[oldHandlerName](jsLib.event.fixEvent(evt));
}
//add an event listener to element with the parameters type, element[newHandlerName], false
element.addEventListener( type, element[newHandlerName], false);
//return a value of true
return true;
//if element has the attachEvent method
} else if ( element.attachEvent ) {
//the value of the oldHandlerName item within element is the value handler
element[oldHandlerName] = handler;
//the value of the newHandlerName item within element is a new event handler
element[newHandlerName] = function() {
//use the fixEvent method to standardize the old event handler
element[oldHandlerName](jsLib.event.fixEvent(window.event));
}
//attach an event listener with the parameters "on"+type, element[newHandlerName]
element.attachEvent("on"+type, element[newHandlerName]);
//return a value of true
return true;
}
//return a value of true
return false;
}
//the remove method of the event object takes three parameters: element, type, handler
jsLib.event.remove = function (element, type, handler) {
//the value of the variable oldHandlerName is "jsLib_old_" plus the value of type plus the value of the handlerId property of handler
var oldHandlerName = "jsLib_old_" + type + "_" + handler.handlerId;
//the value of the variable newHandlerName is "jsLib_new_" plus the value of type plus the value of the handlerId property of handler
var newHandlerName = "jsLib_new_" + type + "_" + handler.handlerId;
//if element has the removeEventListener property
if ( element.removeEventListener ) {
//remove the event listener from the element using the paramters type, element[newHandlerName], false
element.removeEventListener(type, element[newHandlerName], false);
//the value of the newHandlerName item within element is null
element[newHandlerName] = null;
//the value of the oldHandlerName item within element is null
element[oldHandlerName] = null;
//return a value of true
return true;
//otherwise if element has the removeEventListener property
} else if ( element.detachEvent ) {
//detach the event from the element using the paramters "on"+type, element[newHandlerName]
element.detachEvent( "on"+type, element[newHandlerName] );
//the value of the newHandlerName item within element is null
element[newHandlerName] = null;
//the value of the oldHandlerName item within element is null
element[oldHandlerName] = null;
//return a value of true
return true;
}
//return a value of false
return false;
}
//the fixEvent method of the event object takes one parameter: oEvt
jsLib.event.fixEvent = function (oEvt) {
// if the Event object has already been fixed, exit this method
if ( oEvt.fixed === true ) return oEvt;
//the variable evt is an object
var evt = {};
//the fixed property of the the evt object is true
evt.fixed = true;
//the oEvt property of the evt object is oEvt
evt.oEvt = oEvt;
//the type property of the evt object is type property of oEvt
evt.type = oEvt.type;
//if oEvt contains a "target" property
if ( "target" in oEvt ) {
//the value of the target property of evt is the value of the target property of oEvt
evt.target = oEvt.target;
//otherwise if oEvt contains a "srcElement" property
} else if ( "srcElement" in oEvt ) {
//the value of the target property of evt is the value of the srcElement property of oEvt
evt.target = oEvt.srcElement;
//otherwise
} else {
//the value of the target property of evt is the document
evt.target = document;
}
//if the target property of evt is null //the value of the target property of evt is the document
if ( evt.target == null ) evt.target = document;
//if the target nodetype property of evt is 3
if ( evt.target.nodeType == 3 ) { // Fix Safari "span" problem
//the value of the target property of evt is the target parentNode property of evt
evt.target = evt.target.parentNode;
}
//if oEvt contains a "timeStamp" property
if ( "timeStamp" in oEvt ) {
//the timestamp property of evt equals the timestamp property of oEvt
evt.timeStamp = oEvt.timeStamp;
//otherwise
} else {
//the timestamp property of evt equals the valueOf method of a new Date object
evt.timeStamp = new Date().valueOf();
}
//the shiftKey property of evt equals the shiftKey property of oEvt
evt.shiftKey = oEvt.shiftKey;
//the ctrlKey property of evt equals the ctrlKey property of oEvt
evt.ctrlKey = oEvt.ctrlKey;
//the altKey property of evt equals the altKey property of oEvt
evt.altKey = oEvt.altKey;
//the value of the metaKey property of evt is the metaKey property of oEvt if the metaKey property exists or the
//ctrlKey property of oEvt if it doesn't
evt.metaKey = ( "metaKey" in oEvt ) ? oEvt.metaKey : oEvt.ctrlKey;
//the preventDefault method of evt is
evt.preventDefault = function () {
//if the preventDefault method exists in oEvt
if ( "preventDefault" in oEvt ) { // DOM Standard
//execute the preventDefault method of oEvt
oEvt.preventDefault();
//otherwise if the returnDefault method exists in oEvt
} else if ( "returnValue" in oEvt) { // IE
//the returnValue property of oEvt is false
oEvt.returnValue = false;
}
}
//the stopPropagation method of evt is
evt.stopPropagation = function () {
//if the stopPropagation method exists in oEvt
if ( "stopPropagation" in oEvt ) { // DOM Standard
//execute the stopPropagation method of oEvt
oEvt.stopPropagation();
//otherwise if the cancelBubble method exists in oEvt
} else if ( "cancelBubble" in oEvt ) { // IE
//the cancelBubble property of oEvt is true
oEvt.cancelBubble = true;
}
}
//if the jsLib.event.mouse object and the jsLib.event.mouse.fixMouse method exist
if ( jsLib.event.mouse && jsLib.event.mouse.fixMouse ) {
//execute the fixMouse method with the parameters of oEvt and evt
jsLib.event.mouse.fixMouse( oEvt, evt );
}
//if the jsLib.event.keyboard object and the jsLib.event.mouse.fixKeys method exist
if ( jsLib.event.keyboard && jsLib.event.keyboard.fixKeys ) {
//execute the fixKeys method with the parameters of oEvt and evt
jsLib.event.keyboard.fixKeys( oEvt, evt );
}
//return the value of evt
return evt;
}//if the jsLib object doesn't exist, create a new object named jsLib
if ( ! jsLib ) { var jsLib = {}; }
//if the jsLib.dom object doesn't exist, create a new object named jsLib .dom
if ( ! jsLib.dom ) { jsLib.dom = {}; }
//the readyList property of the jsLib.dom object is an empty array
jsLib.dom.readyList = [];
//the isReady property of the jsLib.dom object has a value of false
jsLib.dom.isReady = false;
//the ready method of the jsLib.dom object is a function with one parameter: fn
jsLib.dom.ready = function ( fn ) {
//if fn is a function
if ( fn instanceof Function ) {
//if the value of the jsLib.dom isReady property is true
if ( jsLib.dom.isReady ) {
//execute the call method of fn with the parameter document
fn.call(document);
//otherwise
} else {
//add the value of fn to the end of the readyList array
jsLib.dom.readyList.push( fn );
}
//otherwise
} else {
//if the isReady property of the jsLib.dom object is true
if ( jsLib.dom.isReady ) {
//while the length of the readList array is greater than 0
while ( jsLib.dom.readyList.length > 0 ) {
//the value of fn is the last element in the readList array, which has been removed
fn = jsLib.dom.readyList.pop();
//execute the call method of fn with the parameter of document
fn.call(document);
}
}
}
}
//the readyInit method of the jsLib.dom object is a function
jsLib.dom.readyInit = function () {
//if the addEventListener method exists
if ( document.addEventListener ) { // DOM event model
//attach an event listener to the document with the parameters "DOMContentLoaded" and a function that is defined as
document.addEventListener(
"DOMContentLoaded",
function () {
//the value of the isReady property of the jsLib.dom object is true
jsLib.dom.isReady = true;
//execute the ready method of the jsLib.dom object
jsLib.dom.ready();
},
//return a value of false
false
);
//otherwise if the attachEvent method exists
} else if ( document.attachEvent ) { // IE event model
//if the doScroll method exists and the value of window equals window.top
if ( document.documentElement.doScroll && window == window.top ) { // Are we in an iframe?
// No, we're not in an iframe. Use doScroll polling to
// simulate DOMContentLoaded. By Diego Perini at
// http://javascript.nwbox.com/IEContentLoaded/
//the variable doScrollPoll is a function
var doScrollPoll = function () {
//if the value of the isReady property of the jsLib dom object is true, return to the calling function
if ( jsLib.dom.isReady ) return;
//try this set of actions
try {
//execute the the doScroll method of the documentElement property with a parameter of "left"
document.documentElement.doScroll("left");
//if there is an error, catch the error
} catch( error ) {
//set a timer with the parameters of the doScrollPoll function and a delay time of 0
setTimeout( doScrollPoll, 0 );
//return to the calling function
return;
}
//the value of the isReady property of the jsLib.dom object is true
jsLib.dom.isReady = true;
//execute the ready method of the jsLib.dom object
jsLib.dom.ready();
}
//execute the doScrollPoll function
doScrollPoll();
//otherwise
} else {
// Yes, we are in an iframe or doScroll isn't supported.
// Use the onreadystatechange event
//attach an event to the document with the parameters of "onreadystatechange" and a function that is defined as
document.attachEvent(
"onreadystatechange",
function () {
//if the value of the readyState property of the document is "complete"
if ( document.readyState === "complete" ) {
//the value of the isReady property of the jsLib.dom object is true
jsLib.dom.isReady = true;
//execute the ready method of the jsLib.dom object
jsLib.dom.ready();
}
}
);
}
// Use the onload event as a last resort
//if the attachEvent method exists
if ( window.attachEvent ) {
//execute the attachEvent method with the parameters of onload and a function that is defined as
window.attachEvent(
"onload",
function () {
//the value of the isReady property of the jsLib.dom object is true
jsLib.dom.isReady = true;
//execute the ready method of the jsLib.dom object
jsLib.dom.ready();
}
);
}
}
}
// Call the method that initializes the DOM library
jsLib.dom.readyInit();1 个解决方案
#1
Try giving the exact path/location of the images in your code
尝试在代码中提供图像的确切路径/位置
imageNode.src = "arrows_off.png";
#1
Try giving the exact path/location of the images in your code
尝试在代码中提供图像的确切路径/位置
imageNode.src = "arrows_off.png";