Сортировка не работает для моих значков заголовка таблицы, что я могу сделать? - PullRequest
Новая
       0

Сортировка не работает для моих значков заголовка таблицы, что я могу сделать?

0 голосов
/ 13 июня 2019

В приведенном ниже коде я попытался создать простую книгу оценок учеников с динамическим div, который появляется при нажатии кнопки «Показать оценки».Кнопка создается динамически и отображается в таблице рядом с именами учащихся.Как вы можете видеть, шрифтовые иконки сортировки в заголовке таблицы не работают должным образом, и я не знаю, где я ошибся с кодом.Фрагмент кода: 

window.addEventListener('DOMContentLoaded', function () {
    console.log('DOM fully loaded and parsed');
    "use strict";
    // student list
    var studentsList = [{
            name: "Peter",
            grades: [10, 10, 10, 10, 10],
            selected: false
        },
        {
            name: "Stark",
            grades: [10, 10, 10, 9, 7],
            selected: false
        },
        {
            name: "Thanos",
            grades: [3, 5, 9, 7, 10],
            selected: false
        },
        {
            name: "Hulk",
            grades: [2, 2, 2, 2, 10],
            selected: false
        },
        {
            name: "Thor",
            grades: [10, 5, 9, 4, 10],
            selected: false
        }
    ];

    // prevent enter from submitting/refreshing
    $("#namesInput").keypress(function (event) {
        if (event.keyCode == 13) {
            event.preventDefault();
            $("#addStudentBtn").click();
        }
    });

    //variables
    var nameInput = document.getElementById("namesInput");
    var addStudentBtn = document.getElementById("addStudentBtn");
    var newIndex;
    var gradesInput = document.getElementById("gradesInput");
    var gradesTableBody = document.getElementById("gradesTableBody");
    var addGradesBtn = document.getElementById("addGradesBtn");
    var gradesHeader = document.getElementById("gradesHeader");
    var oldIndex;
    var studentsTableBody = document.getElementById("studentsTableBody");
    var gradesWrapper = document.getElementById("gradesWrapper");
    var hideGradesBtn = document.getElementById("hideGradesBtn");
    var sortGradesDown = document.getElementById("sortGradesDown");
    var sortGradesUp = document.getElementById("sortGradesUp");
    var sortAverageUp = document.getElementById("sortAverageUp");
    var sortAverageDown = document.getElementById("sortAverageDown");
    var sortingNaming;

    //events
    addStudentBtn.addEventListener("click", studentNameInput);
    addGradesBtn.addEventListener("click", studentGradesInput);
    studentsTableBody.addEventListener("click", studentNameInput);
    hideGradesBtn.addEventListener("click", hideGrades);
    sortGradesDown.addEventListener("click", studentGradesInput);
    sortAverageDown.addEventListener("click", studentNameInput);
    sortGradesUp.addEventListener("click", studentGradesInput);
    sortAverageUp.addEventListener("click", studentNameInput);



    //functions
    function drawStudentTable() {
        var tableBody = document.getElementById("studentsTableBody");
        var tableData = "";
        for (var i = 0; i < studentsList.length; i++) {
            tableData += `
        <tr>
        <td></td>
        <td>${studentsList[i].name}</td>
        <td>${averageGrade(studentsList[i].grades)}</td>
        <td><button data-index ="${i}" data-id ="showGrades">Show grades</button></td>
        <td></td>
        </tr>
        `;
        }
        tableBody.innerHTML = tableData;
    }
    drawStudentTable(studentsList);


    function averageGrade(array) {
        var sum = 0;
        for (var i = 0; i < array.length; i++) {
            sum += parseInt(array[i], 10);
        }
        var average = (sum / array.length).toFixed(2);
        average = Number(average);
        return average;
    }


    function addStudent() {
        var newStudent = {
            name: nameInput.value,
            grades: [],
            selected: false,
        }
        studentsList.push(newStudent);
        nameInput.value = "";
    }

    function selectStudent(event) {
        oldIndex = newIndex;
        newIndex = Number(event.target.dataset.index);
        studentsList[newIndex].selected = true;
        if (oldIndex || oldIndex == 0) {
            studentsList[oldIndex].selected = false;
        }
    }

    function studentNameInput(event) {
        if (nameInput.value && event.target.id == "addStudentBtn") {
            addStudent();
            drawStudentTable();
        } else if (event.target.dataset.id == "showGrades") {
            selectStudent(event)
            showGrades();
            drawGradesTable();
        } else if (event.currentTarget.dataset.id == "sortBtn") {
            drawStudentTable();
            sortingOrder(event);
            sortingAverageGrades();
        }
    }

    function addGrade() {
        if (gradesInput.value <= 10) {
            var newGrade = Number(gradesInput.value);
            newGrade = Number(newGrade.toFixed(2));
            var grades = studentsList[newIndex].grades;
            grades.push(newGrade);
            gradesInput.value = "";
        } else
            alert("Grade is not correctly inserted!");
    }

    function drawGradesTable() {
        var grades = studentsList[newIndex].grades;
        gradesTableBody.innerHTML = "";
        for (var i = 0; i < grades.length; i++) {
            gradesTableBody.innerHTML += `
            <tr>
            <td>${grades[i]}</td>
            </tr>
            `;
        }
    }

    function showGrades() {
        gradesHeader.innerHTML = studentsList[newIndex].name;
        gradesInput.value = "";
        gradesWrapper.classList.remove("hidden");
        gradesWrapper.classList.add("float");
        studentsWrapper.classList.add("float");
    }

    function hideGrades() {
        gradesWrapper.classList.add("hidden");
        studentsWrapper.classList.remove("float");
        gradesInput.value = "";

    }

    function studentGradesInput(event) {
        if (gradesInput.value && event.target.id == "addGradesBtn") {
            addGrade();
            drawStudentTable();
            drawGradesTable();
        } else if (event.target.dataset.id == "showGrades") {
            selectStudent(event)
            drawGradesTable();
            showGrades();
        } else if (event.target.id == "hideGradesBtn") {
            hideGrades();
        } else if (event.currentTarget.dataset.id == "sortBtn") {
            drawGradesTable();
            sortingOrder(event);
            sortingGrades();
        }
    }

    function sortingOrder(event) {
        if (event.target.id == "sortGradesDown" || event.target.id == "sortAverageDown") {
            sortingNaming = "descending";
        } else if (event.target.id == "sortGradesUp" || event.target.id == "sortAverageUp") {
            sortingNaming = "ascending";
        }
    }

    function sortingAverageGrades() {
        var grades = studentsList[newIndex].grades;
        if (sortingNaming == "ascending") {
            grades.sort((a, b) => a - b);
        } else if (sortingNaming == "descending") {
            grades.sort((a, b) => b - a);
        }
    }


    function sortingGrades() {
        if (sortingNaming == "ascending") {
            studentsList.sort(function (a, b) {
                return averageGrade(a.grades) - averageGrade(b.grades);
            });
        } else if (sortingNaming == "descending") {
            studentsList.sort(function (a, b) {
                return averageGrade(b.grades) - averageGrade(a.grades);
            });
        }
    }
});
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    max-height: 100%;
    font-family: 'Dosis', sans-serif;
}


body {
    min-width:900px;
    height:100%;

}

#studentsWrapper {
    text-align: center;
    height: 100%;
    position: relative;
    padding-bottom: 100em;
    margin-bottom: -100em;
    overflow: hidden;
    background-color: lightseagreen;

}
h2 {
    font-size: 50px;
    margin-bottom: 40px;
    margin-top: 30px;
}

td {
    height: 40px;
}

table {
    text-align: center;
    width: 100%;
    border-collapse: collapse;
    margin-top:50px;
}
th {
    text-align: center;
    padding:0.3em;
    font-size: 25px;

}

.hidden {
    display: none;
}

.float {
    float: left;
    width: 50%;
}

#gradesWrapper {
    text-align: center;
    height: 100%;
    position: relative;
    padding-bottom: 100em;
    margin-bottom: -100em;
    overflow: hidden;
    height:100%;
    background-color: lightgreen;


}

#hideGradesBtn {
    position: absolute;
    top: 1em;
    left: 1em;
}

input{
border-radius: 50px;
border:none;
height: 30px;
width: 150px;
}


button {
    border-radius: 50px;
    width: 100px;
    border:none;
    height: 30px;
}
button:hover {
    color:white;
    background-color: rgb(27, 145, 139);
    border:none;
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="description" content="Catalog de note">
    <meta name="author" content="Adelina Lipsa">
    <meta name="keywords" content="HTML,CSS,JavaScript">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Catalog de note</title>
    <link href="catalog.css" rel="stylesheet" type="text/css">
    <script src="https://kit.fontawesome.com/2926c10e78.js"></script>
    <script src="catalog.js"></script>
</head>

<body>
    <div id="studentsWrapper">
        <h2><i class="fas fa-user-graduate"></i> Students list </h2>
        <div class="input-space">
            <input type="text" autocomplete="off" id="namesInput">
            <button id="addStudentBtn"><i class="fas fa-plus"></i> Add student</button>
        </div>
        <table id="table">
            <thead>
                <tr>
                    <th></th>
                    <th>Name</th>
                    <th>Average grade</th>
                    <th></th>
                    <th></th>
                </tr>
                <tr>
                    <th></th>
                    <th></th>
                    <th><button id="sortAverageDown" data-id="sortBtn" class="sortBtn"><i
                                class="fas fa-sort-numeric-down"></i></button><button id="sortAverageUp"
                            data-id="sortBtn" class="sortBtn"><i class="fas fa-sort-numeric-up"></i></button>
                    </th>
                    <th></th>
                    <th></th>
                </tr>
            </thead>
            <tbody id="studentsTableBody"></tbody>
        </table>
    </div>
    <div id="gradesWrapper" class="hidden">
        <button id="hideGradesBtn">Hide grades</button>
        <h2 id="gradesHeader"></h2>
        <div class="grades-space">
            <input type="number" id="gradesInput" autocomplete="off" min="1" max="10">
            <button id="addGradesBtn">Add grade</button>
        </div>
        <table>
            <thead>
                <tr>
                    <th>Grades</th>
                </tr>
                <tr>
                    <th>
                        <button id="sortGradesDown" data-id="sortBtn" class="sortBtn"><i class="fas fa-sort-numeric-down"></i></button><button id="sortGradesUp" data-id="sortBtn" class="sortBtn"><i class="fas fa-sort-numeric-up"></i></button>
                    </th>
                </tr>
            </thead>
            <tbody id="gradesTableBody"></tbody>
        </table>
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/d3js/5.9.0/d3.min.js"></script>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...