Помогите решить задачу!
Привет! Ребят, может у кого есть начальные наброски таблицы такого характера, меня интересует только набросок добавления из массива всех элементов в таблицу
Создайте панель управления студентами, на которой будут располагаться таблица со студентами с фильтрами и сортировкой форма добавления нового студента Студенты должны храниться в массиве. Каждый студент - объект, содержащий следующие данные: имя фамилия отчество дата рождения (объект Date) год начала обучения факультет (строка) |
Библиотека для реализация на фронте
|
TomWalbridge,
ищите по форуму ... https://javascript.ru/forum/dom-wind...tml#post500746 https://javascript.ru/forum/misc/777...tml#post509074 |
<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>
еще пример :) |
TomWalbridge,
searchTable - фильтровали, фильтровали, а вернули нефильтрованное))) |
TomWalbridge,
строка 10 - 14 - вы определитесь уже, методы jQuery редко совпадают с методами js. |
Всем спасибо за ответы!
Я тут набросал код, но почему то не работает(
<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>
|
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
}
}
|
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
}
}
|
Я переделал без JQ
|
| Часовой пояс GMT +3, время: 13:00. |