1
我只將JS文件添加到這篇文章，但此作業是使用JS排序的報表。不知何故，箭頭/分揀機沒有出現在任何瀏覽器中。這項工作將在今天晚些時候完成，我花了數小時的時間來解決問題。我以爲你可以使用JS編碼排序/箭頭，但不知何故，它們顯示爲斷開的鏈接/圖像。它應該是這樣的：
JavaScript排序/指針箭頭現在顯示在任何瀏覽器
//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
\t var that = this;
\t //if less than 2 arguments are passed to the TableSort object
\t if (arguments.length < 2) {
\t \t //the value of lastRow is true
\t \t lastRow = true;
\t }
\t
//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);
\t //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."
\t \t throw new Error("TableSort: Table id is not a DOM element.");
}
//if the tagname property of the table property is not TABLE
\t if (this.table.tagName != "TABLE") {
//throw a new error that says "TableSort: Table id is not a table element."
\t \t 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
\t this.sortUp = true;
//the value of the imageNodes property of the TableSort object is an empty array
\t this.imageNodes = [];
\t //the value of the lastRow property of the TableSort object is the value of lastRow
\t 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
\t for (var i = 0; i < headers.length; i++) {
//the value of header is the item in the headers array represented by i
\t \t 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
\t \t if (i == 0) {
//the value of the sortColumn property of the TableSort object is the value of columnName
\t \t \t this.sortColumn = columnName;
//the src property of imageNode is "arrows_up.png"
\t \t \t imageNode.src = "arrows_up.png";
//otherwise
\t \t } else {
//the src property of imageNode is "arrows_off.png"
\t \t \t 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
\t \t 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
\t 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
\t \t \t 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
\t \t \t 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"
\t \t \t 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"
\t \t \t that.imageNodes[that.sortColumn].src = "arrows_down.png";
}
\t \t //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
\t var that = this;
//if the sortColumn property of the TableSort object is an empty string, return to the calling function
\t 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
\t 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
\t 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.
\t \t 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
\t rows.shift();
\t
//if the value of the lastRow property of the that object is false
\t if (that.lastRow == false) {
\t \t //the value of the variable totalsRow is the last item in the rows array
\t \t var totalsRow = rows[rows.length - 1];
\t \t //remove the row represented by totalsRow from the tbodyNode
\t \t totalsRow.parentNode.removeChild(totalsRow);
\t \t //remove the last item from the rows array
\t \t rows.pop(); \t \t
\t }
\t
//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
\t \t var d = new Date(value);
//return true if value can be converted to a date
\t \t return ! isNaN(d);
}
//the variable isMoney is a function with one parameter: value
\t var isMoney = function (value) {
//the value of the variable m is the replace method of value with the parameters /[$,]/g and an empty string
\t \t var m = value.replace(/[$,]/g, "");
//return true if value is a text string that can be turned into a number
\t \t 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
\t \t var i, textA, textB, valueA, valueB;
//create the variable cell
\t \t 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
\t \t for (i = 0; i < cellsA.length; i++) {
//the value of cell is the value of the item represented by i in the cellsA array
\t \t \t cell = cellsA[i];
//if the value of the className property of cell equals the value of the sortColumn property of that
\t \t \t if (cell.className == that.sortColumn) {
//the value of valueA is the firstChild nodeValue of cell
\t \t \t \t valueA = cell.firstChild.nodeValue;
//end the function
\t \t \t \t 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
\t \t for (i = 0; i < cellsB.length; i++) {
//the value of cell is the value of the item represented by i in the cellsB array
\t \t \t cell = cellsB[i];
//if the value of the className property of cell equals the value of the sortColumn property of that
\t \t \t if (cell.className == that.sortColumn) {
//the value of valueB is the firstChild nodeValue of cell
\t \t \t \t valueB = cell.firstChild.nodeValue;
//end the function
\t \t \t \t 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
\t \t \t valueA = parseFloat(valueA);
//the value of valueB is valueB converted to a number with decimal places
\t \t \t valueB = parseFloat(valueB);
//otherwise, if valueA and valueB can be converted to dates
\t \t } else if (isDate(valueA) && isDate(valueB)) {
//the value of valueA is a new date object with the parameter of valueA
\t \t \t valueA = new Date(valueA);
//the value of valueB is a new date object with the parameter of valueB
\t \t \t valueB = new Date(valueB);
//otherwise, if valueA and valueB are money values
\t \t } 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
\t \t \t 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
\t \t \t 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
\t \t \t return -1 * direction;
//otherwise if the value of valueB is less than the value of valueA
\t \t } else if (valueB < valueA) {
//return 1 multiplied by the value of direction
\t \t \t return 1 * direction;
//otherwise
\t \t } else {
//return the number 0
\t \t \t 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
\t \t tbodyNode.appendChild(rows[i]);
}
\t
\t //if totalsRow exists in this object
\t if (totalsRow) {
\t \t //execute the insertBefore method of the tbodyNode with the parameters of totalsRow and rows[rows.length]
\t \t //tbodyNode.insertBefore(totalsRow, rows[rows.length]); //that doesn't work with internet explorer, so I changed it to the code below
\t \t tbodyNode.appendChild(totalsRow);
\t }
}//if the jsLib object doesn't exist
if (! jsLib) {
//create a new object named jsLib
\t 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
\t 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
\t \t 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
\t 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
\t \t element[oldHandlerName] = handler;
//the value of the newHandlerName item within element is a new event handler
\t \t element[newHandlerName] = function(evt) {
//use the fixEvent method to standardize the old event handler
\t \t \t element[oldHandlerName](jsLib.event.fixEvent(evt));
}
//add an event listener to element with the parameters type, element[newHandlerName], false
\t \t element.addEventListener(type, element[newHandlerName], false);
//return a value of true
\t \t return true;
//if element has the attachEvent method
} else if (element.attachEvent) {
//the value of the oldHandlerName item within element is the value handler
\t \t element[oldHandlerName] = handler;
//the value of the newHandlerName item within element is a new event handler
\t \t element[newHandlerName] = function() {
//use the fixEvent method to standardize the old event handler
\t \t \t element[oldHandlerName](jsLib.event.fixEvent(window.event));
}
\t \t //attach an event listener with the parameters "on"+type, element[newHandlerName]
element.attachEvent("on"+type, element[newHandlerName]);
//return a value of true
\t \t return true;
}
//return a value of true
\t 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
\t 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
\t 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
\t \t element.removeEventListener(type, element[newHandlerName], false);
//the value of the newHandlerName item within element is null
\t \t element[newHandlerName] = null;
//the value of the oldHandlerName item within element is null
\t \t element[oldHandlerName] = null;
//return a value of true
\t \t 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]
\t \t element.detachEvent("on"+type, element[newHandlerName]);
//the value of the newHandlerName item within element is null
\t \t element[newHandlerName] = null;
//the value of the oldHandlerName item within element is null
\t \t element[oldHandlerName] = null;
//return a value of true
\t \t return true;
}
\t //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
\t 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
\t 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
\t \t evt.target = oEvt.target;
//otherwise if oEvt contains a "srcElement" property
\t } else if ("srcElement" in oEvt) {
//the value of the target property of evt is the value of the srcElement property of oEvt
\t \t evt.target = oEvt.srcElement;
//otherwise
\t } else {
//the value of the target property of evt is the document
\t \t evt.target = document;
}
//if the target property of evt is null //the value of the target property of evt is the document
\t if (evt.target == null) evt.target = document;
//if the target nodetype property of evt is 3
\t if (evt.target.nodeType == 3) { // Fix Safari "span" problem
//the value of the target property of evt is the target parentNode property of evt
\t \t 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
\t \t evt.timeStamp = oEvt.timeStamp;
//otherwise
\t } else {
//the timestamp property of evt equals the valueOf method of a new Date object
\t \t 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
\t evt.ctrlKey = oEvt.ctrlKey;
//the altKey property of evt equals the altKey property of oEvt
\t 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
\t //ctrlKey property of oEvt if it doesn't
\t evt.metaKey = ("metaKey" in oEvt) ? oEvt.metaKey : oEvt.ctrlKey;
\t //the preventDefault method of evt is
evt.preventDefault = function() {
//if the preventDefault method exists in oEvt
\t \t if ("preventDefault" in oEvt) { // DOM Standard
//execute the preventDefault method of oEvt
\t \t \t oEvt.preventDefault();
//otherwise if the returnDefault method exists in oEvt
\t \t } else if ("returnValue" in oEvt) { // IE
//the returnValue property of oEvt is false
\t \t \t oEvt.returnValue = false;
}
}
//the stopPropagation method of evt is
evt.stopPropagation = function() {
//if the stopPropagation method exists in oEvt
\t \t if ("stopPropagation" in oEvt) { // DOM Standard
//execute the stopPropagation method of oEvt
\t \t oEvt.stopPropagation();
//otherwise if the cancelBubble method exists in oEvt
\t \t } else if ("cancelBubble" in oEvt) { // IE
//the cancelBubble property of oEvt is true
\t \t \t 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
\t \t 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
\t \t jsLib.event.keyboard.fixKeys(oEvt, evt);
}
\t //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
\t if (fn instanceof Function) {
//if the value of the jsLib.dom isReady property is true
\t \t if (jsLib.dom.isReady) {
//execute the call method of fn with the parameter document
\t \t \t fn.call(document);
//otherwise
\t \t } else {
//add the value of fn to the end of the readyList array
\t \t \t jsLib.dom.readyList.push(fn);
}
//otherwise
\t } else {
//if the isReady property of the jsLib.dom object is true
\t \t if (jsLib.dom.isReady) {
//while the length of the readList array is greater than 0
\t \t \t while (jsLib.dom.readyList.length > 0) {
//the value of fn is the last element in the readList array, which has been removed
\t \t \t \t fn = jsLib.dom.readyList.pop();
//execute the call method of fn with the parameter of document
\t \t \t \t fn.call(document);
}
}
}
}
//the readyInit method of the jsLib.dom object is a function
jsLib.dom.readyInit = function() {
//if the addEventListener method exists
\t if (document.addEventListener) { // DOM event model
//attach an event listener to the document with the parameters "DOMContentLoaded" and a function that is defined as
\t \t document.addEventListener(
"DOMContentLoaded",
function() {
//the value of the isReady property of the jsLib.dom object is true
\t \t \t \t jsLib.dom.isReady = true;
//execute the ready method of the jsLib.dom object
\t \t \t \t jsLib.dom.ready();
},
//return a value of false
\t \t \t false
);
//otherwise if the attachEvent method exists
\t } 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/
\t \t \t //the variable doScrollPoll is a function
\t \t \t var doScrollPoll = function() {
//if the value of the isReady property of the jsLib dom object is true, return to the calling function
\t \t \t \t if (jsLib.dom.isReady) return;
//try this set of actions
\t \t \t \t try {
//execute the the doScroll method of the documentElement property with a parameter of "left"
\t \t \t \t \t document.documentElement.doScroll("left");
//if there is an error, catch the error
\t \t \t \t } catch(error) {
//set a timer with the parameters of the doScrollPoll function and a delay time of 0
\t \t \t \t \t setTimeout(doScrollPoll, 0);
//return to the calling function
\t \t \t \t \t return;
}
//the value of the isReady property of the jsLib.dom object is true
\t \t \t \t jsLib.dom.isReady = true;
//execute the ready method of the jsLib.dom object
\t \t \t \t jsLib.dom.ready();
}
//execute the doScrollPoll function
\t \t \t doScrollPoll();
//otherwise
\t \t } 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
\t \t \t document.attachEvent(
"onreadystatechange",
function() {
//if the value of the readyState property of the document is "complete"
\t \t \t \t \t if (document.readyState === "complete") {
//the value of the isReady property of the jsLib.dom object is true
\t \t \t \t \t \t jsLib.dom.isReady = true;
//execute the ready method of the jsLib.dom object
\t \t \t \t \t \t jsLib.dom.ready();
}
}
);
}
// Use the onload event as a last resort
\t \t //if the attachEvent method exists
if (window.attachEvent) {
//execute the attachEvent method with the parameters of onload and a function that is defined as
\t \t \t window.attachEvent(
"onload",
function() {
//the value of the isReady property of the jsLib.dom object is true
\t \t \t \t \t jsLib.dom.isReady = true;
//execute the ready method of the jsLib.dom object
\t \t \t \t \t jsLib.dom.ready();
}
);
}
}
}
// Call the method that initializes the DOM library
jsLib.dom.readyInit();
我不得不添加2個CSS文件和3 JS文件到相同的文本區域，BTW – LinaC
您可以編輯您的文章，並顯示爲只有你有麻煩的代碼被剪掉。這會增加你的問題的可讀性。 – Sojtin