Hi I'm currently struggling with an assignment in my web studies and would appreciate any insite. This is the assignment: - Create a sort function, written in an external js-file, to a html table IF javascript is enabled. There are 3 files to be used in this assignment: - A html-file with a small table with 4 columns - A js-file consisting of a this code: function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } - And finally a js-file that should consist of a sortTable function that adds a button for sorting the tabledata by the fourth column in the html table IF javascript is enabled. This is as far as I've come with the sort-script: window.onload = function () function = sortTable() } { var table = document.getElementById("datatable"); var rows = table.getElementsByTagName("tr"); var cells = Array(); for (var i = 1; i < rows.length; i++) { var cell = rows.getElementsByTagName("td")[3].firstChild.nodeValue; cells = cell; } return cells; { I don't have a clue as to where or how I need to incorporate the sort button. Another frustrating thing is that I'm restricted to not change or add anything to either the html-file or the addloadevent.js-file. Please, I beg you all! I'm a newbie that really could need some help here!!
<HTML> <Head> <Script type="text/javascript"> var fieldRef = new Array(); var origData = new Array(); var tmp = new Array(); var dateOrder = new Array(); var sortOrder = new Array(); var tmpDates = new Array(); var refDates = new Array(); var nRows = 0; var nCells = 0; var isForm = ""; function sortOther(isCol){ tmp.sort(); for (i=0; i<tmp.length; i++) { for (n=0; n<tmp.length; n++) { if (origData[isCol][i] == tmp[n]){sortOrder[n] = i} } } } function sortDates(){ tmp2 = new Array(); for (i=0; i<tmp.length; i++) { tmpDates[i] = Date.parse(new Date(tmp[i])); refDates[i] = Date.parse(new Date(tmp[i])); } tmpDates.sort(); for (i=0; i<tmp.length; i++) { for (n=0; n<tmp.length; n++) { if (refDates[i] == tmpDates[n]) { tmp2[n] = tmp[i]; dateOrder[n] = i; } } } tmp = tmp2; } function checkType(isData){ splitDate = isData.split("/"); refDate = new Date(isData); if (splitDate[0] < 1 || splitDate[0] > 12 || refDate.getDate() != splitDate[1] || splitDate[2].length != 4 || (!/^19|20/.test(splitDate[2]))) { return false } return true; } function sortTable(isChecked,isCol){ if (isChecked) { for (i=0; i<nCells; i++) { if (i != isCol) { document.getElementById('box'+i).disabled = true; } } for (i=0; i<nRows-1; i++) { tmp[i] = isForm[fieldRef[isCol][i]].value; } dateInfo = checkType(tmp[0]); if (!dateInfo){sortOther(isCol)} else {sortDates()} for (i=0; i<nRows-1; i++) { isForm[fieldRef[isCol][i]].value = tmp[i]; } for (i=0; i<nCells; i++) { if (i != isCol) { for (n=0; n<nRows-1; n++) { if (dateInfo){isForm[fieldRef[i][n]].value = origData[i][dateOrder[n]]} else {isForm[fieldRef[i][n]].value = origData[i][sortOrder[n]]} } } } } if (!isChecked) { for (i=0; i<nCells; i++) { document.getElementById('box'+i).disabled = false; } for(i=0; i<nRows-1; i++) { isForm[fieldRef[isCol][i]].value = origData[isCol][i]; } for (i=0; i<nCells; i++) { for (n=0; n<nRows-1; n++) { isForm[fieldRef[i][n]].value = origData[i][n]; } } } } function init(){ isForm = document.forms.Form1; isTable = document.getElementById('data1'); nRows = isTable.rows.length-1; nCells = isTable.rows[0].cells.length-1; for (i=0; i<nCells; i++) { fieldRef[i] = new Array(); for (n=0; n<nRows-1; n++) { fieldRef[i][n] = (nCells*n)+i; } } for (i=0; i<nCells; i++) { origData[i] = new Array(); for (n=0; n<nRows-1; n++) { origData[i][n] = isForm[fieldRef[i][n]].value; } } } window.onload=init; </Script> </Head> <Body> <Form name='Form1'> <Table id='data1' align='center'> <tr> <td></td> <td>C1</td> <td>C2</td> <td>C3</td> <td>C4</td> <td>C5</td> <td>C6</td> </tr> <tr> <td>R1</td> <td><input type=text size='8' value='Mars'></td> <td><input type=text size='8' value='Rain'></td> <td><input type=text size='8' value='6/21/2006'></td> <td><input type=text size='8' value='Yen'></td> <td><input type=text size='16' value='(505) 771-9876 x4'></td> <td><input type=text size='8' value='North'></td> </tr> <tr> <td>R2</td> <td><input type=text size='8' value='Venus'></td> <td><input type=text size='8' value='Fog'></td> <td><input type=text size='8' value='7/13/2005'></td> <td><input type=text size='8' value='Dollar'></td> <td><input type=text size='16' value='(216) 221-8763'></td> <td><input type=text size='8' value='South'></td> </tr> <tr> <td>R3</td> <td><input type=text size='8' value='Earth'></td> <td><input type=text size='8' value='Hail'></td> <td><input type=text size='8' value='11/3/2004'></td> <td><input type=text size='8' value='Euro'></td> <td><input type=text size='16' value='(619) 881-3331'></td> <td><input type=text size='8' value='East'></td> </tr> <tr> <td>R4</td> <td><input type=text size='8' value='Jupiter'></td> <td><input type=text size='8' value='Snow'></td> <td><input type=text size='8' value='4/30/2005'></td> <td><input type=text size='8' value='Peso'></td> <td><input type=text size='16' value='(216) 481-2226 x892'></td> <td><input type=text size='8' value='West'></td> </tr> <tr> <td>Sort</td> <td><input type=checkbox id='box0' onclick="sortTable(this.checked,0)"></td> <td><input type=checkbox id='box1' onclick="sortTable(this.checked,1)"></td> <td><input type=checkbox id='box2' onclick="sortTable(this.checked,2)"></td> <td><input type=checkbox id='box3' onclick="sortTable(this.checked,3)"></td> <td><input type=checkbox id='box4' onclick="sortTable(this.checked,4)"></td> <td><input type=checkbox id='box5' onclick="sortTable(this.checked,5)"></td> </tr> </Table> </Form> Sort rows based upon the sort order of selected column -- ascending<br> Date data may be in any column </Body> </HTML> Code (markup):