Форум

TomWalbridge · #1 (**permalink**) 18.11.2021, 11:02

Привет! Ребят, может у кого есть начальные наброски таблицы такого характера, меня интересует только набросок добавления из массива всех элементов в таблицу
Создайте панель управления студентами, на которой будут располагаться

таблица со студентами с фильтрами и сортировкой
форма добавления нового студента
Студенты должны храниться в массиве. Каждый студент - объект, содержащий следующие данные:

имя
фамилия
отчество
дата рождения (объект Date)
год начала обучения
факультет (строка)

Vlasenko Fedor · #2 (**permalink**) 18.11.2021, 11:30

Библиотека для реализация на фронте

рони · #3 (**permalink**) 18.11.2021, 11:34

TomWalbridge,
ищите по форуму ...
https://javascript.ru/forum/dom-wind...tml#post500746

https://javascript.ru/forum/misc/777...tml#post509074

Vlasenko Fedor · #4 (**permalink**) 18.11.2021, 12:01

<style>
@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700');
body {
  font-family: Roboto;
}

table {
  border-collapse: collapse
}

td,
th {
  border: 2px solid red;
  width: 150px;
  height: 40px;
  text-align: center;
}

th {
  cursor: pointer;
  user-select: none;
}

th.sorted[data-order="-1"]::after {
  content: "▼"
}

th.sorted[data-order="1"]::after {
  content: "▲"
}
</style>
<table>
  <thead onclick="getSort(event)">
    <tr>
      <th>Name</th>
      <th>SecondName</th>
      <th>Patronymic</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody contenteditable>
    <tr>
      <td>Макс</td>
      <td>Троцкий</td>
      <td>Ильич</td>
      <td>77</td>
    </tr>
    <tr>
      <td>Вася</td>
      <td>Петров</td>
      <td>Александрович</td>
      <td>21</td>
    </tr>
    <tr>
      <td>Петя</td>
      <td>Иванов</td>
      <td>Петрович</td>
      <td>15</td>
    </tr>
    <tr>
      <td>Миша</td>
      <td>Ложкин</td>
      <td>Васильевич</td>
      <td>43</td>
    </tr>
    <tr>
      <td>Владимир</td>
      <td>Сидоров</td>
      <td>Игоревич</td>
      <td>33</td>
    </tr>
    <tr>
      <td>Коля</td>
      <td>Колбаскин</td>
      <td>Олегович</td>
      <td>41</td>
    </tr>
  </tbody>
</table>
<script>
const getSort = ({target}) => {
  const order = target.dataset.order = -target.dataset.order || 1;
  const index = [...target.parentNode.cells].indexOf(target);
  const collator = new Intl.Collator(["en", "ru"], {numeric: true});
  const comparator = (index, order) => (a, b) => order * collator.compare(a.children[index].innerHTML, b.children[index].innerHTML);
  for (const tBody of target.closest("table").tBodies) tBody.append(...[...tBody.rows].sort(comparator(index, order)));
  for (const cell of target.parentNode.cells) cell.classList.toggle("sorted", cell === target);
};
</script>

еще пример

рони · #5 (**permalink**) 20.11.2021, 21:48

TomWalbridge,
searchTable - фильтровали, фильтровали, а вернули нефильтрованное)))

рони · #6 (**permalink**) 20.11.2021, 21:53

TomWalbridge,
строка 10 - 14 - вы определитесь уже, методы jQuery редко совпадают с методами js.

TomWalbridge · #7 (**permalink**) 20.11.2021, 22:10

Всем спасибо за ответы!
Я тут набросал код, но почему то не работает(

<body>
    <div class="container">
        <div class="filter__container">
            <h2>Показать студентов</h2>
            <ul class="filter__list">
                <li class="filter__list-item">
                    <label for="">по ФИО</label>
                    <input class="filter" type="text" id="fio">
                </li>
                <li class="filter__list-item">
                    <label for="fac">по факультету</label>
                    <input class="filter" type="text" id="fac">
                </li>
                <li class="filter__list-item">
                    <label for="date-start">по году начала обучения </label>
                    <input class="filter" type="text" id="date-start">
                </li>
                <li class="filter__list-item">
                    <label for="date-end">по году окончания обучения</label>
                    <input class="filter" type="text" id="date-end">
                </li>

            </ul>
        </div>
        <form class="form">
            <h2> Добавить студента</h2>
            <ul class="list">
                <li><label for="student__name">Имя</label>
                    <input class="student" id="student__name" type="text"></li>
                <li><label for="student__sname">Фамилия</label>
                    <input class="student" id="student__sname" type="text"></li>
                <li><label for="student__lname">Отчетство</label>
                    <input class="student" id="student__lname" type="text"></li>
                <li><label for="student__bdate">Дата рождения</label>
                    <input class="student" id="student__bdate" type="date"></li>
                <li><label for="student__startLearn">Год начала обучения</label>
                    <input class="student" id="student__startLearn" type="text"></li>
                <li><label for="student__faculty">Факультет</label>
                    <input class="student" id="student__faculty" type="text"></li>
                <button class="btn-add">Добавить судента</button>
            </ul>
        </form>
        <table>
            <thead>
                <tr>
                    <th>ФИО</th>
                    <th>Факультет</th>
                    <th>Дата рождения</th>
                    <th>Год обучения</th>
                </tr>
            </thead>
            <tbody id="mytable"></tbody>
        </table>
    </div>
    <script src="js/main.js"></script>
</body>

TomWalbridge · #8 (**permalink**) 20.11.2021, 22:11

const array = [
    { sname: 'Сидоров', fname: 'Иван', lname: 'Михайлович', bdate: '23.12.1990', startlearn: '12.12.2005', fac: 'Физики' },
    { sname: 'Сидорова', fname: 'Ивана', lname: 'Михайловна', bdate: '12.11.1994', startlearn: '24.01.2006', fac: 'Астрономии' },
    { sname: 'Сорокина', fname: 'Мария', lname: 'Алексеевна', bdate: '01.01.1992', startlearn: '11.12.2008', fac: 'Математики' },
    { sname: 'Андропов', fname: 'Александр', lname: 'Петрович', bdate: '3.10.1992', startlearn: '13.12.2003', fac: 'Информатики' },
    { sname: 'Никифоров', fname: 'Олег', lname: 'Олегович', bdate: '24.12.1995', startlearn: '12.12.2004', fac: 'Химии' }
]
buildTable(array)
let inputFio = document.querySelector('#fio')

inputFio.addEventListener('keyup', searchTable)



function searchTable(value, data) {
    let filteredData = []

    for (let i = 0; i < data.length; i++) {
        value = value.toLowerCase()
        let sname = data[i].sname.toLowerCase()

        if (sname.include(value)) {
            filteredData.push(data[i])
        }
    }

    return data
}

function buildTable(data) {
    let table = document.getElementById('mytable')
    table.innerHTML = ''
    for (let i = 0; i < data.length; i++) {
        let row = `
        <tr>
        <td>${data[i].sname + data[i].fname + data[i].lname}</td>
        <td>${data[i].bdate}</td>
        <td>${data[i].startlearn}</td>
        <td>${data[i].fac}</td>
        <tr/>
        `
        table.innerHTML += row
    }
}

TomWalbridge · #9 (**permalink**) 20.11.2021, 22:11

const array = [
    { sname: 'Сидоров', fname: 'Иван', lname: 'Михайлович', bdate: '23.12.1990', startlearn: '12.12.2005', fac: 'Физики' },
    { sname: 'Сидорова', fname: 'Ивана', lname: 'Михайловна', bdate: '12.11.1994', startlearn: '24.01.2006', fac: 'Астрономии' },
    { sname: 'Сорокина', fname: 'Мария', lname: 'Алексеевна', bdate: '01.01.1992', startlearn: '11.12.2008', fac: 'Математики' },
    { sname: 'Андропов', fname: 'Александр', lname: 'Петрович', bdate: '3.10.1992', startlearn: '13.12.2003', fac: 'Информатики' },
    { sname: 'Никифоров', fname: 'Олег', lname: 'Олегович', bdate: '24.12.1995', startlearn: '12.12.2004', fac: 'Химии' }
]
buildTable(array)
let inputFio = document.querySelector('#fio')

inputFio.addEventListener('keyup', searchTable)



function searchTable(value, data) {
    let filteredData = []

    for (let i = 0; i < data.length; i++) {
        value = value.toLowerCase()
        let sname = data[i].sname.toLowerCase()

        if (sname.include(value)) {
            filteredData.push(data[i])
        }
    }

    return data
}

function buildTable(data) {
    let table = document.getElementById('mytable')
    table.innerHTML = ''
    for (let i = 0; i < data.length; i++) {
        let row = `
        <tr>
        <td>${data[i].sname + data[i].fname + data[i].lname}</td>
        <td>${data[i].bdate}</td>
        <td>${data[i].startlearn}</td>
        <td>${data[i].fac}</td>
        <tr/>
        `
        table.innerHTML += row
    }
}

TomWalbridge · #10 (**permalink**) 20.11.2021, 22:12

Я переделал без JQ

Форум

Справочник

Discord чат

Курсы javascript