Skip to content

Instantly share code, notes, and snippets.

@LunaticWolf

LunaticWolf/Assignment3.html

Created January 15, 2019 21:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save LunaticWolf/e3c60dfee9a1dd9bc906e8876f8aa80c to your computer and use it in GitHub Desktop.
Save LunaticWolf/e3c60dfee9a1dd9bc906e8876f8aa80c to your computer and use it in GitHub Desktop.
Download ZIP
Assignment 3
Raw
Assignment3.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
font-size:0.8em;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
}
table thead td{
font-weight:bold;
cursor:pointer;
}
/* If you wish to highlight current sortable column, add layout effects below */
.highlightedColumn{
}
</style>
<script type="text/javascript">
/************************************************************************************************************
Sortable table script
Copyright (C) 2005 DTHMLGoodies.com, Alf Magne Kalleland
This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.
This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
Lesser General Public License for more details.
You should have received a copy of the GNU Lesser General Public
License along with this library; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
Dhtmlgoodies.com., hereby disclaims all copyright interest in this script
written by Alf Magne Kalleland.
Alf Magne Kalleland, 2005
Owner of DHTMLgoodies.com
************************************************************************************************************/
var tableWidget_okToSort = true;
var tableWidget_arraySort = new Array();
tableWidget_tableCounter = 1;
var activeColumn = new Array();
var currentColumn = false;
function sortNumeric(a,b){
a = a.replace(/,/,'.');
b = b.replace(/,/,'.');
a = a.replace(/[^\d\.\/]/g,'');
b = b.replace(/[^\d\.\/]/g,'');
if(a.indexOf('/')>=0)a = eval(a);
if(b.indexOf('/')>=0)b = eval(b);
return a/1 - b/1;
}
function sortString(a, b) {
if ( a.toUpperCase() < b.toUpperCase() ) return -1;
if ( a.toUpperCase() > b.toUpperCase() ) return 1;
return 0;
}
function sortTable()
{
if(!tableWidget_okToSort)return;
tableWidget_okToSort = false;
/* Getting index of current column */
var obj = this;
var indexThis = 0;
while(obj.previousSibling){
obj = obj.previousSibling;
if(obj.tagName=='TD')indexThis++;
}
if(this.getAttribute('direction') || this.direction){
direction = this.getAttribute('direction');
if(navigator.userAgent.indexOf('Opera')>=0)direction = this.direction;
if(direction=='ascending'){
direction = 'descending';
this.setAttribute('direction','descending');
this.direction = 'descending';
}else{
direction = 'ascending';
this.setAttribute('direction','ascending');
this.direction = 'ascending';
}
}else{
direction = 'ascending';
this.setAttribute('direction','ascending');
this.direction = 'ascending';
}
var tableObj = this.parentNode.parentNode.parentNode;
var tBody = tableObj.getElementsByTagName('TBODY')[0];
var widgetIndex = tableObj.getAttribute('tableIndex');
if(!widgetIndex)widgetIndex = tableObj.tableIndex;
if(currentColumn)currentColumn.className='';
document.getElementById('col' + widgetIndex + '_' + (indexThis+1)).className='highlightedColumn';
currentColumn = document.getElementById('col' + widgetIndex + '_' + (indexThis+1));
var sortMethod = tableWidget_arraySort[widgetIndex][indexThis]; // N = numeric, S = String
if(activeColumn[widgetIndex] && activeColumn[widgetIndex]!=this){
if(activeColumn[widgetIndex])activeColumn[widgetIndex].removeAttribute('direction');
}
activeColumn[widgetIndex] = this;
var cellArray = new Array();
var cellObjArray = new Array();
for(var no=1;no<tableObj.rows.length;no++){
var content= tableObj.rows[no].cells[indexThis].innerHTML+'';
cellArray.push(content);
cellObjArray.push(tableObj.rows[no].cells[indexThis]);
}
if(sortMethod=='N'){
cellArray = cellArray.sort(sortNumeric);
}else{
cellArray = cellArray.sort(sortString);
}
if(direction=='descending'){
for(var no=cellArray.length;no>=0;no--){
for(var no2=0;no2<cellObjArray.length;no2++){
if(cellObjArray[no2].innerHTML == cellArray[no] && !cellObjArray[no2].getAttribute('allreadySorted')){
cellObjArray[no2].setAttribute('allreadySorted','1');
tBody.appendChild(cellObjArray[no2].parentNode);
}
}
}
}else{
for(var no=0;no<cellArray.length;no++){
for(var no2=0;no2<cellObjArray.length;no2++){
if(cellObjArray[no2].innerHTML == cellArray[no] && !cellObjArray[no2].getAttribute('allreadySorted')){
cellObjArray[no2].setAttribute('allreadySorted','1');
tBody.appendChild(cellObjArray[no2].parentNode);
}
}
}
}
for(var no2=0;no2<cellObjArray.length;no2++){
cellObjArray[no2].removeAttribute('allreadySorted');
}
tableWidget_okToSort = true;
}
function initSortTable(objId,sortArray)
{
var obj = document.getElementById(objId);
obj.setAttribute('tableIndex',tableWidget_tableCounter);
obj.tableIndex = tableWidget_tableCounter;
tableWidget_arraySort[tableWidget_tableCounter] = sortArray;
var tHead = obj.getElementsByTagName('THEAD')[0];
var cells = tHead.getElementsByTagName('TD');
for(var no=0;no<cells.length;no++){
if(sortArray[no]){
cells[no].onclick = sortTable;
}else{
cells[no].style.cursor = 'default';
}
}
for(var no2=0;no2<sortArray.length;no2++){ /* Right align numeric cells */
if(sortArray[no2] && sortArray[no2]=='N')obj.rows[0].cells[no2].style.textAlign='right';
}
tableWidget_tableCounter++;
}
</script>
</head>
<body>
<table id="myTable">
<!--
id of <col> tags should be "col" + index of table(1 = first table, 2 = second table) + _ (underscore) + column index(1.2.3.4...)
-->
<colgroup>
<col id="col1_1"></col>
<col id="col1_2"></col>
<col id="col1_3"></col>
<col id="col1_4"></col>
<col id="col1_5"></col>
</colgroup>
<thead>
<tr>
<td>Name</td>
<td>Age</td>
<td>Position</td>
<td>Income</td>
<td>Gender</td>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>37</td>
<td>Managing director</td>
<td>90.000</td>
<td>Male</td>
</tr>
<tr>
<td>Susan</td>
<td>34</td>
<td>Partner</td>
<td>90.000</td>
<td>Female</td>
</tr>
<tr>
<td>David</td>
<td>29</td>
<td>Head of production</td>
<td>70.000</td>
<td>Male</td>
</tr>
<tr>
<td>Laura</td>
<td>29</td>
<td>Head of marketing</td>
<td>70.000</td>
<td>Female</td>
</tr>
<tr>
<td>Kate</td>
<td>18</td>
<td>Marketing</td>
<td>50.000</td>
<td>Female</td>
</tr>
<tr>
<td>Mona</td>
<td>21</td>
<td>Marketing</td>
<td>53.000</td>
<td>Female</td>
</tr>
<tr>
<td>Mike</td>
<td>21</td>
<td>Marketing</td>
<td>53.000</td>
<td>Male</td>
</tr>
<tr>
<td>Mark</td>
<td>25</td>
<td>Production</td>
<td>52.000</td>
<td>Male</td>
</tr>
<tr>
<td>Peter</td>
<td>33</td>
<td>Production</td>
<td>55.000</td>
<td>Male</td>
</tr>
<tr>
<td>Jennifer</td>
<td>24</td>
<td>Production</td>
<td>49.000</td>
<td>Female</td>
</tr>
<tr>
<td>David</td>
<td>25</td>
<td>Photography</td>
<td>51.000</td>
<td>Male</td>
</tr>
<tr>
<td>Anna</td>
<td>42</td>
<td>Head of photography</td>
<td>56.000</td>
<td>Female</td>
</tr>
<tr>
<td>Rita</td>
<td>30</td>
<td>Photography</td>
<td>54.000</td>
<td>Female</td>
</tr>
<tr>
<td>Magnus</td>
<td>25</td>
<td>Freelancer</td>
<td>65.000</td>
<td>Male</td>
</tr>
<tr>
<td>Johnny</td>
<td>29</td>
<td>Freelancer</td>
<td>63.000</td>
<td>Male</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
initSortTable('myTable',Array('S','N','S','N','S'));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment