Adding a "sort table" button IF javascript is enabled

iwasfirst

Jun 27th 2008, 1:53 am

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[i].getElementsByTagName("td")[3].firstChild.nodeValue;
cells[i] = 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!! :)

Mike H.

Jun 27th 2008, 5:22 am

<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>