<!DOCTYPE html>
<html>
<body>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
body {
background: lightblue;
padding: 32px;
text-align: center;
}
h1 {
font-size: 45px;
}
p {
font-size: 25px;
}
</style>
<p>TABLE</p>
<p id="demo"></p>
<table >
<tr >
<th>#</th>
<th>CLUB</th>
<th>PLAYED</th>
<th>WINS</th>
<th>LOSSES</th>
<th>AT HOME</th>
<th>AWAY</th>
<th>POINTS SCORED</th>
<th>POINTS ALLOWED</th>
<th>POINT DIFFERENTAL</th>
<th>POINTS</th>
</tr>
<tbody id="myTable">
</tbody>
</table>
<script>
var timovi = [
{
at_home: "1-0",
club: "Team1",
losses: 0,
away: "1-0",
played: 2,
wins: 2,
points: 4,
ppg: 98,
point_difference: 82,
points_allowed: 16
},
{
at_home: "0-0",
club: "Team2",
losses: 0,
away: "2-0",
wins: 2,
played: 2,
points: 4,
ppg: 90,
point_difference: 66,
points_allowed: 24
},
{
at_home: "2-0",
club: "Team3",
losses: 0,
away: "0-0",
wins: 2,
played: 2,
points: 4,
ppg: 59,
point_difference: 32,
points_allowed: 27
},
{
at_home: "0-1",
club: "Team4",
losses: 2,
away: "1-1",
wins: 1,
played: 3,
points: 4,
ppg: 49,
point_difference: -72,
points_allowed: 121
},
{
at_home: "1-0",
club: "Team5",
losses: 0,
away: "0-0",
wins: 1,
played: 1,
points: 2,
ppg: 62,
point_difference: 10,
points_allowed: 52
},
{
at_home: "0-0",
club: "Team6",
losses: 0,
away: "1-0",
wins: 1,
played: 1,
points: 2,
ppg: 20,
point_difference: 4,
points_allowed: 16
},
{
at_home: "0-1",
club: "Team7",
losses: 2,
away: "0-1",
wins: 0,
played: 2,
points: 2,
ppg: 44,
point_difference: -13,
points_allowed: 57
},
{
at_home: "0-2",
club: "Team8",
losses: 2,
away: "0-0",
wins: 0,
played: 2,
points: 2,
ppg: 21,
point_difference: -71,
points_allowed: 92
},
{
at_home: "0-0",
club: "Team9",
losses: 2,
away: "0-2",
wins: 0,
played: 2,
points: 2,
ppg: 23,
point_difference: -71,
points_allowed: 94
},
{
at_home: "0-1",
club: "Team10",
losses: 1,
away: "0-0",
wins: 0,
played: 1,
points: 1,
ppg: 16,
point_difference: -4,
points_allowed: 20
}
]
buildTable(timovi)
function buildTable(data) {
var table = document.getElementById('myTable')
for (var i = 0; i < data.length; i ) {
var row = `<tr>
<td>${i 1}</td>
<td>${data[i].club}</td>
<td>${data[i].played}</td>
<td>${data[i].wins}</td>
<td>${data[i].losses}</td>
<td>${data[i].at_home}</td>
<td>${data[i].away}</td>
<td>${data[i].ppg}</td>
<td>${data[i].points_allowed}</td>
<td>${data[i].point_difference}</td>
<td>${data[i].points}</td>
</tr>`
table.innerHTML = row
}
}
</script>
<style>
/* width */
::-webkit-scrollbar {
width: 20px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px black;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: grey;
border-radius: 10px;
}
</style>
</body>
</html>This is the code.
So I'm trying to make a website where you have basketball teams and see sorted table by points, if 2 or more teams have the same amount of points then it's by point_difference but not on a click when page loads. I'm spending hours on this please help.
I don't want to sort
I want to sort
const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;
const comparer = (idx, asc) => (a, b) => ((v1, v2) =>
v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2)
)(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));
// do the work...
document.querySelectorAll('th').forEach(th => th.addEventListener( 'click',(() => {
const table = th.bodovi('table');
Array.from(table.querySelectorAll('tr:nth-child(n 2)'))
.sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc))
.forEach(tr => table.appendChild(tr));
})));
I've tried this but that isn't what I want.
CodePudding user response：
Your array timovi has the builtin function sort. You can call it with a comparer function, to define what is bigger than what:
function compareData(itemA, itemB)
{
let pointDiff = itemB.points - itemA.points;
if(pointDiff == 0)
{
pointDiff = itemB.point_difference - itemA.point_difference;
}
return pointDiff;
}
sort sorts in place, so the rest of your code can stay the same.
var timovi = [
{
at_home: "1-0",
club: "Team1",
losses: 0,
away: "1-0",
played: 2,
wins: 2,
points: 4,
ppg: 98,
point_difference: 82,
points_allowed: 16
},
{
at_home: "0-0",
club: "Team2",
losses: 0,
away: "2-0",
wins: 2,
played: 2,
points: 4,
ppg: 90,
point_difference: 66,
points_allowed: 24
},
{
at_home: "2-0",
club: "Team3",
losses: 0,
away: "0-0",
wins: 2,
played: 2,
points: 4,
ppg: 59,
point_difference: 32,
points_allowed: 27
},
{
at_home: "0-1",
club: "Team4",
losses: 2,
away: "1-1",
wins: 1,
played: 3,
points: 4,
ppg: 49,
point_difference: -72,
points_allowed: 121
},
{
at_home: "1-0",
club: "Team5",
losses: 0,
away: "0-0",
wins: 1,
played: 1,
points: 2,
ppg: 62,
point_difference: 10,
points_allowed: 52
},
{
at_home: "0-0",
club: "Team6",
losses: 0,
away: "1-0",
wins: 1,
played: 1,
points: 2,
ppg: 20,
point_difference: 4,
points_allowed: 16
},
{
at_home: "0-1",
club: "Team7",
losses: 2,
away: "0-1",
wins: 0,
played: 2,
points: 2,
ppg: 44,
point_difference: -13,
points_allowed: 57
},
{
at_home: "0-2",
club: "Team8",
losses: 2,
away: "0-0",
wins: 0,
played: 2,
points: 2,
ppg: 21,
point_difference: -71,
points_allowed: 92
},
{
at_home: "0-0",
club: "Team9",
losses: 2,
away: "0-2",
wins: 0,
played: 2,
points: 2,
ppg: 23,
point_difference: -71,
points_allowed: 94
},
{
at_home: "0-1",
club: "Team10",
losses: 1,
away: "0-0",
wins: 0,
played: 1,
points: 1,
ppg: 16,
point_difference: -4,
points_allowed: 20
}
];
function compareData(itemA, itemB)
{
let pointDiff = itemB.points - itemA.points;
if(pointDiff == 0)
{
pointDiff = itemB.point_difference - itemA.point_difference;
}
return pointDiff;
}
timovi.sort(compareData);
console.log(timovi);