We Keep Coding

Table sort by total column in JavaScript

I am trying to sort the table by total value. Link. This works but it fails when two table elements have same point.
I am trying to sort the table using javascript to order by total points at the end. The table is a dynamic one so W1, W2, W3 columns adds up to total. Each row is dynamically created as well.
Please help
const sortTotal = () => {
const tbl = [...document.getElementsByClassName("fl-table")][0];
const tbody = [...tbl.tBodies][0];
const oObjects = [];
[...tbody.rows].forEach(row => {
const cells = [...row.cells];
const obj = [...row.cells].map(cell => {
return cell.innerHTML;
});
oObjects.push(obj);
});
oObjects.sort((a, b) => a[a.length -2] > b[b.length -2] ? 1 : -1);
[...tbody.rows].forEach((row, i) => {
[...row.cells].forEach((cell, j) => {
cell.innerHTML = oObjects[i][j];
});
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onClick="sortTotal()">
Sort</button>
</button>
<table class="fl-table">
<thead>
<tr>
<th>Player</th>
<th>Player Name</th>
<th>W1</th>
<th>W2</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td class="agl-profile-img-new"><img src="https://via.placeholder.com/70C/O https://placeholder.com/"></td>
<td>Heather Rankin</td>
<td>4</td>
<td>21</td>
<td>25</td>
</tr>
<tr>
<td class="agl-profile-img-new"><img src="https://via.placeholder.com/70C/O https://placeholder.com/"></td>
<td>Stephen Puopolo</td>
<td>3</td>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td class="agl-profile-img-new"><img src="https://via.placeholder.com/70C/O https://placeholder.com/"></td>
<td>Latheesh V M V</td>
<td>2</td>
<td>26</td>
<td>4</td>
</tr>
</tbody>
</table>

You are sorting by wrong column.
a[a.length -2] > b[b.length -2]
should be
a[a.length -1] > b[b.length -1]
and sort will make 25, 4, 4 by total

How to sort the table to order by points at end of column using javascript

I am trying to sort the table using javascript to order by total points at the end. The table is a dynamic one so W1, W2, W3 columns adds up to total. Is there way to order rows them by total in javascript. Each row is dynamically created as well.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="fl-table">
<thead>
<tr>
<th>Player</th>
<th>Player Name</th>
<!-- <th>W1</th>
<th>W2</th> -->
<th>W1</th>
<th>W2</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td class="agl-profile-img-new"><img src="https://via.placeholder.com/70
C/O https://placeholder.com/"></td>
<td>Heather Rankin</td>
<td>4</td>
<td>21</td>
<td>25</td>
</tr>
<tr>
<td class="agl-profile-img-new"><img src="https://via.placeholder.com/70
C/O https://placeholder.com/"></td>
<td>Stephen Puopolo</td>
<td>3</td>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td class="agl-profile-img-new"><img src="https://via.placeholder.com/70
C/O https://placeholder.com/"></td>
<td>Latheesh V M V</td>
<td>2</td>
<td>26</td>
<td>28</td>
</tr>
</tbody>
<tbody>
</tbody>
</table>
Is there is any way? Please help

can you gather the cells into object and sort them like this. https://jsfiddle.net/e4oscnz8/4/
const sortTotal = () => {
const tbl = [...document.getElementsByClassName("fl-table")][0];
const tbody = [...tbl.tBodies][0];
const oObjects = [];
[...tbody.rows].forEach(row => {
const cells = [...row.cells];
const obj = [...row.cells].map(cell => {
return cell.innerHTML;
});
oObjects.push(obj);
});
oObjects.sort((a, b) => a[a.length -2] > b[b.length -2] ? 1 : -1);
[...tbody.rows].forEach((row, i) => {
[...row.cells].forEach((cell, j) => {
cell.innerHTML = oObjects[i][j];
});
});
}

push tr rows into array or object and sort by your custom sort function: https://jsfiddle.net/2dq7m8k9/
you are using jquery so life is good :)
function SortByTotal(tr1, tr2){//descending sorting
var total1 = parseInt(tr1.find('td:last-child').text());
var total2 = parseInt(tr2.find('td:last-child').text());
return ((total1 > total2) ? -1 : ((total1 < total2) ? 1 : 0));
}
var trs=new Array();
$('#mytable tbody').first().children('tr').each(function(){
trs.push($(this).clone());
});
trs.sort(SortByTotal);
$('#mytable tbody').first().empty();
var i=0;
for (i = 0; i < trs.length; i++) {
$('#mytable tbody').first().append(trs[i]);
}

Sort a table with another table inside it

I currently have a table with a another table inside it that I have appended dynamically, for example:
<table>
<tr>
<th>Rank</th>
<th>Institute</th>
</tr>
<tr>
<td>1</td>
<td>MIT</td>
</tr>
<tr>
<td>
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>David</td>
<td>21</td>
</tr>
<tr>
<td>James</td>
<td>19</td>
</tr>
</table>
</td>
</tr>
<td>2</td>
<td>UBC</td>
</tr>
<tr>
<td>
<table>
<tr>
<th>Age</th>
<th>Height</th>
</tr>
<tr>
<th>Angela</th>
<th>18</th>
</tr>
<tr>
<th>Peter</th>
<th>23</th>
</tr>
</table>
</td>
<tr>
I used a javascript table sorting function from w3schools and it works well:
function sortTable(tableId, valueType, column) {
var table, rows, switching, i, x, y, shouldSwitch;
table = document.getElementById(tableId);
switching = true;
while (switching) {
switching = false;
rows = table.rows;
for (i = 1; i < (rows.length - 1); i++) {
shouldSwitch = false;
x = rows[i].$("TD")[column];
console.log("x: " + x);
y = rows[i + 1].$("TD")[column];
if (valueType == "String") {
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
shouldSwitch = true;
break;
}
} else if (valueType == "Integer") {
if (parseInt(x.innerHTML.toLowerCase()) < parseInt(y.innerHTML.toLowerCase())) {
shouldSwitch = true;
break;
}
} else if (valueType == "IntegerReverse") {
if (parseInt(x.innerHTML.toLowerCase()) > parseInt(y.innerHTML.toLowerCase())) {
shouldSwitch = true;
break;
}
}
}
if (shouldSwitch) {
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
}
}
}
However, the problem is when I sort the table, the outer table sorts fine but the inner table gets messed up. I tried to give the inner table's parent td an id and tried to use the 'not' operator but I think because I am mixing jQuery with javascript, it still doesn't work.
Does anyone know how to sort just the outer table and keep the inner table as it is while still being appends to its parent td? Any help is much appreciated! ^^
Thank you!

Sort html table by columns with high, medium, low values using javascript

I am trying to sort a table using javascript but not in the traditional numerical or alphabetical sort method. Each Table row has 3 TD's. The first is the name second is a level (high, medium, low or blank) and the third is also a level (high, medium, low or blank). I am trying to sort the table based on the levels value , high, medium or low, and sending the empty TD's to the bottom.
I normally work with PHP so I am a little weak when it comes to javascript. Basics of what I am trying to do:
Count the number of tr's exclude the first one (Because its the header)
for each tr get the innerHTML of the second td. Compare each tds innerHTML and arrange them from High to low putting the empty ones last. If the header is clicked again reverse.
I think i pretty much have it worked out but I get stuck when it comes to switching the elements order.
<table id="myTable2">
<tr>
<th>Food/Beverage</th>
<th onclick="sortTable(1)">Alkalizing Level</th>
<th onclick="sortTable(2)">Acidic Level</th>
</tr>
<tr>
<td>Ale (Dark)</td>
<td></td>
<td>High</td>
</tr>
<tr>
<td>Ale (Pale)</td>
<td></td>
<td>High</td>
</tr>
<tr>
<td>Alkaline, Ionized Water</td>
<td>High</td>
<td></td>
</tr>
<tr>
<td>Almond Butter</td>
<td>Medium</td>
<td></td>
</tr>
<tr>
<td>Almond Milk (unsweetened)</td>
<td>Low</td>
<td></td>
</tr>
<tr>
<td>Almonds</td>
<td>Medium</td>
<td></td>
</tr>
<tr>
<td>Amaranth Seeds</td>
<td>Low</td>
<td></td>
</tr>
<tr>
<td>Apple Cider Vinegar</td>
<td></td>
<td>Low</td>
</tr>
<tr>
<td>Apple Juice</td>
<td></td>
<td>High</td>
</tr>
<tr>
<td>Apple Pie</td>
<td></td>
<td>High</td>
</tr>
<tr>
<td>Apples</td>
<td></td>
<td>Medium</td>
</tr>
<tr>
<td>Apricots</td>
<td></td>
<td>Medium</td>
</tr>
<tr>
<td>Apricots (Dried)</td>
<td></td>
<td>High</td>
</tr>
</table>
JS
<script>
table = document.getElementById("myTable2");
rows = table.rows;
i = 1;
count = 0;
while(i < rows.length){
alkLevel = rows[i].getElementsByTagName("TD")[1].innerHTML;
alkLevelNext = rows[i+1].getElementsByTagName("TD")[1].innerHTML;
var alkLevelPosition = 0;
i++;
if(alkLevel === "High"){
alkLevelPosition += 1;
}
if (alkLevel === "Medium"){
alkLevelPosition += 2;
}
if(alkLevel === "Low"){
alkLevelPosition += 3;
}
if(alkLevel === ""){
alkLevelPosition += 4;
}
if (alkLevelPosition > alkLevelNext) {
//shouldSwitch = true;
//break;
}
}
</script>

Here is an approach to getting the table sort you are looking for.
Added click event listeners to the table headers (rather than the inline onclick approach), then determined which column controls the sort using cellIndex, and included a sort function that handles the high, medium, low scoring properly.
Each time a header is clicked, all the table rows (except the header row) are removed, sorted, and then appended in the new order (added thead and tbody elements to simplify the selections) - in addition a class indicating the direction of the sort is added to the corresponding header element so that the next sort can be reversed.
Also, added alpha sort to the first table column as a bonus (just to simplify element selection and attaching the event listeners).
const headings = document.querySelectorAll('#myTable th');
const tbody = document.querySelector('#myTable tbody');
const sortRows = (order, i) => {
const rows = document.querySelectorAll('#myTable tbody tr');
if (i === 0) {
if (order === 'asc') {
return Array.from(rows).sort();
} else {
return Array.from(rows).sort().reverse();
}
} else {
return Array.from(rows).sort((a, b) => {
const aval = a.cells[i].textContent;
const bval = b.cells[i].textContent;
let s = 0;
if (aval === bval) {
s = 0;
} else if (aval === 'High') {
s = 1;
} else if (bval === 'High') {
s = -1;
} else if (aval === 'Medium') {
s = 1;
} else if (bval === 'Medium') {
s = -1;
} else if (aval === 'Low') {
s = 1;
} else if (bval === 'Low') {
s = -1;
}
if (order === 'desc') {
s *= -1;
}
return s;
});
}
};
for (const heading of headings) {
heading.addEventListener('click', (event) => {
const fragment = document.createDocumentFragment();
const elem = event.currentTarget;
let order = 'asc';
if (elem.classList.contains('asc')) {
order = 'desc';
elem.classList.remove('asc');
elem.classList.add('desc');
} else {
elem.classList.remove('desc');
elem.classList.add('asc');
}
for (const s of sortRows(order, elem.cellIndex)) {
fragment.appendChild(s);
}
while (tbody.firstChild) {
tbody.removeChild(tbody.firstChild);
}
tbody.appendChild(fragment);
});
}
th:hover {
cursor: pointer;
}
<table id="myTable">
<thead>
<tr>
<th>Food/Beverage</th>
<th>Alkalizing Level</th>
<th>Acidic Level</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ale (Dark)</td>
<td></td>
<td>High</td>
</tr>
<tr>
<td>Ale (Pale)</td>
<td></td>
<td>High</td>
</tr>
<tr>
<td>Alkaline, Ionized Water</td>
<td>High</td>
<td></td>
</tr>
<tr>
<td>Almond Butter</td>
<td>Medium</td>
<td></td>
</tr>
<tr>
<td>Almond Milk (unsweetened)</td>
<td>Low</td>
<td></td>
</tr>
<tr>
<td>Almonds</td>
<td>Medium</td>
<td></td>
</tr>
<tr>
<td>Amaranth Seeds</td>
<td>Low</td>
<td></td>
</tr>
<tr>
<td>Apple Cider Vinegar</td>
<td></td>
<td>Low</td>
</tr>
<tr>
<td>Apple Juice</td>
<td></td>
<td>High</td>
</tr>
<tr>
<td>Apple Pie</td>
<td></td>
<td>High</td>
</tr>
<tr>
<td>Apples</td>
<td></td>
<td>Medium</td>
</tr>
<tr>
<td>Apricots</td>
<td></td>
<td>Medium</td>
</tr>
<tr>
<td>Apricots (Dried)</td>
<td></td>
<td>High</td>
</tr>
</tbody>
</table>

So it sounds like you just need some help interacting with the DOM (Document Object Model). Looking at what you've written, it looks good so far, but you haven't done anything to actually change the order in which the tags are rendered.
There are numerous libraries that can do this for you, but I'll recommend doing a little bit of research into JavaScript yourself to learn how to actually manipulate the DOM (considering it's fundamental to what JavaScript does in the browser). As a hint, I'll suggest to break the task down into steps that the browser will need to perform:
Isolate the row object (everything between <tr></tr>) in memory from the DOM.
Remove the row object from the DOM.
Re-insert the row object into the DOM at the right place.
This link from W3Schools provides a good example of how to do exactly that: https://www.w3schools.com/howto/howto_js_sort_table.asp
They also have a number of tutorials and stuff that will help you build more proficiency in both HTML and JavaScript, and also CSS (which is really important for front-end stuff). Best of luck! Let us know if you have any questions!

Sorting a table in html using only javascript

I'm trying to figure out how I can sort different columns in HTML. Right now, I have a button that sorts the first column (last name) in descending order. But now I'd like to create a second button, that sorts the 3rd column (Gender) by type.
Here is a link to what I currently have:
https://codepen.io/Pcollins10/pen/Wyxpyy
function sortTable() {
var table, rows, switching, i, x, y, shouldSwitch;
table = document.getElementById("myTable");
switching = true;
/*Make a loop that will continue until
no switching has been done:*/
while (switching) {
//start by saying: no switching is done:
switching = false;
rows = table.getElementsByTagName("TR");
/*Loop through all table rows (except the
first, which contains table headers):*/
for (i = 1; i < rows.length - 1; i++) {
//start by saying there should be no switching:
shouldSwitch = false;
/*Get the two elements you want to compare,
one from current row and one from the next:*/
x = rows[i].getElementsByTagName("TD")[0];
y = rows[i + 1].getElementsByTagName("TD")[0];
//check if the two rows should switch place:
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
//if so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
}
if (shouldSwitch) {
/*If a switch has been marked, make the switch
and mark that a switch has been done:*/
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
}
}
}
table {
border-spacing: 0;
width: 100%;
}
th, td {
text-align: left;
}
tr:nth-child(even) {
background-color: #f2f2f2
}
<p><button onclick="sortTable()">Output 3 (Last Name..descending):</button></p>
<table id="myTable">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th>Birth Date</th>
<th>Favorite Color</th>
</tr>
<tr>
<td>Kournikova</td>
<td>Anna</td>
<td>Female</td>
<td>6/3/1975</td>
<td>Red</td>
</tr>
<tr>
<td>Hingis</td>
<td>Martina</td>
<td>Male</td>
<td>4/2/1979</td>
<td>Green</td>
</tr>
<tr>
<td>Seles</td>
<td>Monica</td>
<td>Female</td>
<td>12/2/1973</td>
<td>Black</td>
</tr>
<tr>
<td>Ambercrombie</td>
<td>Neil</td>
<td>Male</td>
<td>2/13/1943</td>
<td>Tan</td>
</tr>
<tr>
<td>Bishop</td>
<td>Timothy</td>
<td>Male</td>
<td>4/23/1967</td>
<td>Yellow</td>
</tr>
<tr>
<td>Kelly</td>
<td>Sue</td>
<td>Female</td>
<td>7/12/1959</td>
<td>Pink</td>
</tr>
<tr>
<td>Smith</td>
<td>Steve</td>
<td>Male</td>
<td>3/3/1985</td>
<td>Red</td>
</tr>
<tr>
<td>Bonk</td>
<td>Radek</td>
<td>Male</td>
<td>6/3/1975</td>
<td>Green</td>
</tr>
<tr>
<td>Bouillon</td>
<td>Francis</td>
<td>Male</td>
<td>6/3/1975</td>
<td>Blue</td>
</table>
]1
If possible, I'd like to be able to first sort by gender type, then (if the gender is the same), sort by last name.
See below for example.
Any advice would be greatly appreciated!