Preparation Code Preparation HTML (this will be inserted in the <body>
of a valid HTML5 document in standards mode) (useful when testing DOM operations or including libraries) <table >
<thead >
<tr >
<th onclick ="sort_table(people, 0, asc1); asc1 *= -1; asc2 = 1; asc3 = 1;" > Name</th >
<th onclick ="sort_table(people, 1, asc2); asc2 *= -1; asc3 = 1; asc1 = 1;" > Surname</th >
<th onclick ="sort_table(people, 2, asc3); asc3 *= -1; asc1 = 1; asc2 = 1;" > Age</th >
</tr >
</thead >
<tbody id ="people" >
<tr > <td > Raja</td > <td > Dey</td > <td > 18</td > </tr >
<tr > <td > Mamata</td > <td > Sharma</td > <td > 20</td > </tr >
<tr > <td > Avijit</td > <td > Sharma</td > <td > 21</td > </tr >
<tr > <td > Sharanya</td > <td > Dutta</td > <td > 26</td > </tr >
<tr > <td > Nabin</td > <td > Roy</td > <td > 27</td > </tr >
<tr > <td > Raja</td > <td > Dey</td > <td > 18</td > </tr >
<tr > <td > Mamata</td > <td > Sharma</td > <td > 20</td > </tr >
<tr > <td > Avijit</td > <td > Sharma</td > <td > 21</td > </tr >
<tr > <td > Sharanya</td > <td > Dutta</td > <td > 26</td > </tr >
<tr > <td > Nabin</td > <td > Roy</td > <td > 27</td > </tr >
<tr > <td > Raja</td > <td > Dey</td > <td > 18</td > </tr >
<tr > <td > Mamata</td > <td > Sharma</td > <td > 20</td > </tr >
<tr > <td > Avijit</td > <td > Sharma</td > <td > 21</td > </tr >
<tr > <td > Sharanya</td > <td > Dutta</td > <td > 26</td > </tr >
<tr > <td > Nabin</td > <td > Roy</td > <td > 27</td > </tr >
<tr > <td > Raja</td > <td > Dey</td > <td > 18</td > </tr >
<tr > <td > Mamata</td > <td > Sharma</td > <td > 20</td > </tr >
<tr > <td > Avijit</td > <td > Sharma</td > <td > 21</td > </tr >
<tr > <td > Sharanya</td > <td > Dutta</td > <td > 26</td > </tr >
<tr > <td > Nabin</td > <td > Roy</td > <td > 27</td > </tr >
<tr > <td > Raja</td > <td > Dey</td > <td > 18</td > </tr >
<tr > <td > Mamata</td > <td > Sharma</td > <td > 20</td > </tr >
<tr > <td > Avijit</td > <td > Sharma</td > <td > 21</td > </tr >
<tr > <td > Sharanya</td > <td > Dutta</td > <td > 26</td > </tr >
<tr > <td > Nabin</td > <td > Roy</td > <td > 27</td > </tr >
<tr > <td > Raja</td > <td > Dey</td > <td > 18</td > </tr >
<tr > <td > Mamata</td > <td > Sharma</td > <td > 20</td > </tr >
<tr > <td > Avijit</td > <td > Sharma</td > <td > 21</td > </tr >
<tr > <td > Sharanya</td > <td > Dutta</td > <td > 26</td > </tr >
<tr > <td > Nabin</td > <td > Roy</td > <td > 27</td > </tr >
<tr > <td > Raja</td > <td > Dey</td > <td > 18</td > </tr >
<tr > <td > Mamata</td > <td > Sharma</td > <td > 20</td > </tr >
<tr > <td > Avijit</td > <td > Sharma</td > <td > 21</td > </tr >
<tr > <td > Sharanya</td > <td > Dutta</td > <td > 26</td > </tr >
<tr > <td > Nabin</td > <td > Roy</td > <td > 27</td > </tr >
<tr > <td > Raja</td > <td > Dey</td > <td > 18</td > </tr >
<tr > <td > Mamata</td > <td > Sharma</td > <td > 20</td > </tr >
<tr > <td > Avijit</td > <td > Sharma</td > <td > 21</td > </tr >
<tr > <td > Sharanya</td > <td > Dutta</td > <td > 26</td > </tr >
<tr > <td > Nabin</td > <td > Roy</td > <td > 27</td > </tr >
<tr > <td > Raja</td > <td > Dey</td > <td > 18</td > </tr >
<tr > <td > Mamata</td > <td > Sharma</td > <td > 20</td > </tr >
<tr > <td > Avijit</td > <td > Sharma</td > <td > 21</td > </tr >
<tr > <td > Sharanya</td > <td > Dutta</td > <td > 26</td > </tr >
<tr > <td > Nabin</td > <td > Roy</td > <td > 27</td > </tr >
</tbody >
</table >
</body >
Setup JS var tbody, asc1 = 1 , asc2 = 1 , asc3 = 1 ;
tbody = document .getElementById ("people" );
Teardown JS
Test cases
Test #1 Title *
Async
Code * function sort_table (tbody, col, asc ) {
var asc = 1 , col = 0 ;
var rows = tbody.rows , rlen = rows.length , arr = new Array (), i, j, cells, clen;
for (i = 0 ; i < rlen; i++){
cells = rows[i].cells ;
clen = cells.length ;
arr[i] = new Array ();
for (j = 0 ; j < clen; j++){
arr[i][j] = cells[j].innerHTML ;
}
}
arr.sort (function (a, b ){
return (a[col] == b[col]) ? 0 : ((a[col] > b[col]) ? asc : -1 *asc);
});
for (i = 0 ; i < rlen; i++){
arr[i] = "<td>" +arr[i].join ("</td><td>" )+"</td>" ;
}
tbody.innerHTML = "<tr>" +arr.join ("</tr><tr>" )+"</tr>" ;
}
Test #2 Title *
Async
Code *
function sort_table (tbody, col, asc ) {
var asc = 1 , col = 0 ;var rows = tbody.rows , rlen = rows.length , arr = new Array (), i, j, cells, clen;
for (i = 0 ; i < rlen; i++){
cells = rows[i].cells ;
clen = cells.length ;
arr[i] = new Array ();
for (j = 0 ; j < clen; j++){
arr[i][j] = cells[j].innerHTML ;
}
}
arr.sort (function (a, b ){
return (a[col] == b[col]) ? 0 : ((a[col] > b[col]) ? asc : -1 *asc);
});
for (i = 0 ; i < rlen; i++){
rows[i].innerHTML = "<td>" +arr[i].join ("</td><td>" )+"</td>" ;
}
}