Создание динамической страницы с использованием JavaScript
Создание шапки для таблицы при помощи тегов и . Добавление поля поиска , при вводе текста в которое в таблице скрываются строки, не удовлетворяющие введенному тексту. Добавление порядка сортировки по определенному столбцу.
Рубрика
Программирование, компьютеры и кибернетика
Вид
лабораторная работа
Язык
русский
Дата добавления
26.12.2023
Размер файла
1,8 M
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Размещено на http://www.allbest.ru/
МИНИСТЕРСТВО НАУКИ И ВЫСШЕГО ОБРАЗОВАНИЯ рОССИЙСКОЙ ФЕДЕРАЦИИ
Федеральное государственное автономное образовательное учреждение высшего образования
«Дальневосточный федеральный университет» (ДВФУ)
ИНСТИТУТ МАТЕМАТИКИ И КОМПЬЮТЕРНЫХ ТЕХНОЛОГИЙ (ШКОЛА)
Департамент математического и компьютерного моделирования
Лабораторная работа №4
направление подготовки 01.04.02 «Прикладная информатика»
Создание динамической страницы с использованием JavaScript
Выполнила студент группы
№ М9122-01.04.02мкт
Миролюбова Алёна Алексеевна
г. Владивосток
2023
Задание
1. Для таблицы сделать шапку (если нет) при помощи тегов <thead> и <th>.
2. У каждой ячейки шапки добавить «стрелки», которые отображают порядок сортировки по этому столбцу.
3. По нажатию на стрелку JavaScript должен поменять все строки таблицы таким образом, чтобы удовлетворяло выбранному порядку. Выбранная стрелка должна каким-либо образом выделиться как активная и поменять направление.
4. Добавить поле поиска <input type=”text”>, при вводе текста в которое в таблице скрываются строки, не удовлетворяющие введенному тексту. Поиск ведется по первому столбцу. Таблица перерисовывается при изменении (вводе с клавиатуры или стирании) любого символа в поле поиска.
Ход работы
1. Исходный код файла work4.php:
<html>
<head>
<title> Работа 4 </title>
<meta name='viewport' content='width=device-width, initial-scale=1.0' char- set='utf8'>
</head>
<body>
<table border="1">
<thead style='background: #fc0'>
<tr>
<th> id </th>
<th> Страна </th>
<th> Столица </th>
<th> Год основания столицы </th>
<th> Официальный язык </th>
</tr>
</thead>
<tbody>
<?php
$db = pg_connect("host=dz port=5434 dbname=dz user=user password=password");
$result = pg_query($db, "SELECT * FROM countries");
$i = 1;
while ( $row = pg_fetch_assoc($result)){
echo "
<tr>
<td> $i </td>
<td> $row[country] </td>
<td> $row[capital] </td>
<td> $row[year] </td>
<td> $row[language] </td>
</tr>
";
$i++ ;
}
?>
</tbody>
</table>
<input type=”text” id="input">
<hr>
<script src="js4.js"></script>
</body>
</html>
2. Исходный код файла js4.js:
let aTable;
let arr=[]
let i=0;
var trs = document.querySelectorAll('tr');
[].forEach.call(trs, function(tr) {
aTable = [...tr.cells].map((td) => td.textContent);
arr[i]=aTable;
i+=1;
})
var head = arr.shift();
function sort_down_id(arr){
arr = arr.sort(function (a, b) {
if (+a[0] > +b[0]) {
return -1;
}
if (+a[0] < +b[0]) {
return 1;
}
return 0;
});
return arr;
}
function sort_up_id(arr){
arr = arr.sort(function (a, b) {
if (+a[0] > +b[0]) {
return 1;
}
if (+a[0] < +b[0]) {
return -1;
}
return 0;
});
return arr;
}
function sort_down(arr, i){
arr = arr.sort(function (a, b) {
if (a[i] > b[i]) {
return -1;
}
if (a[i] < b[i]) {
return 1;
}
return 0;
});
return arr;
}
function sort_up(arr, i){
arr = arr.sort(function (a, b) {
if (a[i] > b[i]) {
return 1;
}
if (a[i] < b[i]) {
return -1;
}
return 0;
});
return arr;
}
function sorted(e){
switch (e.target.id) {
case '0':
if (e.target.classList==1){
arr = sort_down_id(arr);
tableCreate(arr, head, 0, -1);
} else {
arr = sort_up_id(arr);
tableCreate(arr, head, 0, 1);
}
break;
case '1':
if (e.target.classList==1){
arr = sort_down(arr, 1);
tableCreate(arr, head, 1, -1);
} else {
arr = sort_up(arr, 1);
tableCreate(arr, head, 1, 1);
}
break;
case '2':
if (e.target.classList==1){
arr = sort_down(arr, 2);
tableCreate(arr, head, 2, -1);
} else {
arr = sort_up(arr, 2);
tableCreate(arr, head, 2, 1);
}
break;
case '3':
if (e.target.classList==1){
arr = sort_down(arr, 3);
tableCreate(arr, head, 3, -1);
} else {
arr = sort_up(arr, 3);
tableCreate(arr, head, 3, 1);
}
break;
case '4':
if (e.target.classList==1){
arr = sort_down(arr, 4);
tableCreate(arr, head, 4, -1);
} else {
arr = sort_up(arr, 4);
tableCreate(arr, head, 4, 1);
}
break;
}
}
var up= "⇑";
var down= "⇓";
function tableCreate(arr, head, col, classN){
document.querySelector('table').remove();
let body = document.body;
let tbl = document.createElement('table');
tbl.style.border = '1px solid black';
var header = tbl.createTHead();
header.style = 'background: #fc0';
var tr = header.insertRow();
for(let j = 0; j < head.length; j++){
if (col ==j){
let td = tr.insertCell();
td.appendChild(document.createTextNode(head[j]));
td.id = j;
td.className = classN;
if (classN == 1){
td.innerHTML += up;
}
if (classN == -1){
td.innerHTML += down;
}
td.style.border = '1px solid black';
td.onclick = function(e) {
sorted(e);
};
} else{
let td = tr.insertCell();
td.appendChild(document.createTextNode(head[j]));
td.id = j;
td.className = 0;
td.style.border = '1px solid black';
td.onclick = function(e) {
sorted(e);
};
}
}
var tbody = tbl.createTBody()
for(let i = 0; i < arr.length; i++){
let tr = tbody.insertRow();
for(let j = 0; j < arr[0].length; j++){
let td = tr.insertCell();
td.appendChild(document.createTextNode(arr[i][j] ));
td.style.border = '1px solid black';
}
}
body.appendChild(tbl);
}
window.onload = tableCreate(arr, head, 0, 1);
input.oninput = function() {
let table = document.querySelector('table');
let rows = table.querySelectorAll('tr');
for(let i = 0; i < arr.length; i++){
if (arr[i][1].indexOf(input.value)<0) {
rows[i+1].style.display = 'none';
} else{
rows[i+1].removeAttribute("style");
}
}
};
Изначально таблица отсортирована по id:
динамическая страница javascript
Если нажать на «Страна», то все строки таблицы поменяются таким образом, чтобы страны отсортировались в алфавитном порядке.
Если нажать если нажать ещё раз, страны отсортируются в обратном порядке.
Если нажать на «Официальный язык», то все строки таблицы поменяются таким образом, чтобы языки стран отсортировались в алфавитном порядке.
Поле «input» ищет по столбцу «Страна».
Таблица перерисовывается при изменении (вводе с клавиатуры или стирании) любого символа в поле поиска:
Если ввести страну, которая есть в таблице, то выводиться только она:
Если ввести страну, которой нет в таблице, то не выведется ничего:
Размещено на Allbest.ru
Подобные документы
Структура таблицы и типы данных. Ввод данных в ячейки таблицы. Создание запросов на выборку, удаление, обновление и добавление записей, на создание таблицы. Основное различие между отчетами и формами, их назначение. Создание отчетов для базы данных.
курсовая работа [1,9 M], добавлен 17.06.2014
Разработка приложения, которое содержит данные об экспонатах и выставках. Создание базы данных и добавление элемента с информацией в любую позицию списков. Добавление и удаление экспонатов с выставки. Сохранение всех списков в файлы, составление отчета.
курсовая работа [1,2 M], добавлен 02.07.2014
Использование мастеров Word. Сохранение, закрытие, создание, редактирование документа. Ввод, добавление нового, удаление, выделение, копирование, выравнивание и перемещение текста. Проверка, печать документа. Дополнительные возможности. Создание таблицы.
контрольная работа [137,9 K], добавлен 01.06.2008
Этапы создания презентации: знакомство с программой, добавление графиков и диаграмм, рисование и вставка графических и анимационных объектов. Добавление графических клипов из Clip Gallery. Создание и запуск слайд-фильма. Настройка программы Power Point.
контрольная работа [27,2 K], добавлен 07.12.2010
Создание простых форм-справочников. Редактирование свойств формы в режиме конструктора. Добавление и редактирование свойств элементов управления. Проектирование отчётов для базы данных. Приведение таблицы к нормальной форме и построение схемы данных.
реферат [138,0 K], добавлен 23.11.2008
Создание программы, которая создает набор данных в динамической памяти компьютера и позволяет корректировать его. Описание программного комплекса. Обзор особенностей реализации программы с использованием модулей. Добавление данных в конец текущего набора.
курсовая работа [455,2 K], добавлен 28.08.2017
Создание интерактивных веб-страниц. Что такое JavaScript. Полная интеграция с браузером. Мощные средства для создания сетевых соединений. Подключение и выполнение JavaScript. Загрузка данных без перезагрузки страницы. Объекты для работы с мультимедиа.
лекция [16,2 K], добавлен 05.02.2012
Microsoft PowerPoint 2007 и его новые возможности. Принципы планирования презентации. Присвоение имени и сохранение презентации. Добавление и удаление слайдов. Добавление и форматирование текста, маркированных списков. Добавление клипа, рисунков SmartArt.
методичка [2,3 M], добавлен 16.03.2011
Особенности разработки Web-страницы, с использованием Microsoft Word. Алгоритм работы: сохранение документа Word, как веб-страницы; просмотр веб-страницы, создание гиперссылок. Настройка и проверка Web-страницы с помощью программы Internet Explorer.
контрольная работа [2,4 M], добавлен 03.04.2010
Автоматизация работы пользователя в среде MS Office 2000. Современные методы выявления и предотвращения угроз безопасности функционирования программных средств и баз данных. Создание запросов на обновление, добавление, удаление и создание таблицы.
реферат [33,0 K], добавлен 24.03.2011
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | лабораторная работа |
| Язык | русский |
| Дата добавления | 26.12.2023 |
| Размер файла | 1,8 M |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Размещено на http://www.allbest.ru/
МИНИСТЕРСТВО НАУКИ И ВЫСШЕГО ОБРАЗОВАНИЯ рОССИЙСКОЙ ФЕДЕРАЦИИ
Федеральное государственное автономное образовательное учреждение высшего образования
«Дальневосточный федеральный университет» (ДВФУ)
ИНСТИТУТ МАТЕМАТИКИ И КОМПЬЮТЕРНЫХ ТЕХНОЛОГИЙ (ШКОЛА)
Департамент математического и компьютерного моделирования
Лабораторная работа №4
направление подготовки 01.04.02 «Прикладная информатика»
Создание динамической страницы с использованием JavaScript
Выполнила студент группы
№ М9122-01.04.02мкт
Миролюбова Алёна Алексеевна
г. Владивосток
2023
Задание
1. Для таблицы сделать шапку (если нет) при помощи тегов <thead> и <th>.
2. У каждой ячейки шапки добавить «стрелки», которые отображают порядок сортировки по этому столбцу.
3. По нажатию на стрелку JavaScript должен поменять все строки таблицы таким образом, чтобы удовлетворяло выбранному порядку. Выбранная стрелка должна каким-либо образом выделиться как активная и поменять направление.
4. Добавить поле поиска <input type=”text”>, при вводе текста в которое в таблице скрываются строки, не удовлетворяющие введенному тексту. Поиск ведется по первому столбцу. Таблица перерисовывается при изменении (вводе с клавиатуры или стирании) любого символа в поле поиска.
Ход работы
1. Исходный код файла work4.php:
<html>
<head>
<title> Работа 4 </title>
<meta name='viewport' content='width=device-width, initial-scale=1.0' char- set='utf8'>
</head>
<body>
<table border="1">
<thead style='background: #fc0'>
<tr>
<th> id </th>
<th> Страна </th>
<th> Столица </th>
<th> Год основания столицы </th>
<th> Официальный язык </th>
</tr>
</thead>
<tbody>
<?php
$db = pg_connect("host=dz port=5434 dbname=dz user=user password=password");
$result = pg_query($db, "SELECT * FROM countries");
$i = 1;
while ( $row = pg_fetch_assoc($result)){
echo "
<tr>
<td> $i </td>
<td> $row[country] </td>
<td> $row[capital] </td>
<td> $row[year] </td>
<td> $row[language] </td>
</tr>
";
$i++ ;
}
?>
</tbody>
</table>
<input type=”text” id="input">
<hr>
<script src="js4.js"></script>
</body>
</html>
2. Исходный код файла js4.js:
let aTable;
let arr=[]
let i=0;
var trs = document.querySelectorAll('tr');
[].forEach.call(trs, function(tr) {
aTable = [...tr.cells].map((td) => td.textContent);
arr[i]=aTable;
i+=1;
})
var head = arr.shift();
function sort_down_id(arr){
arr = arr.sort(function (a, b) {
if (+a[0] > +b[0]) {
return -1;
}
if (+a[0] < +b[0]) {
return 1;
}
return 0;
});
return arr;
}
function sort_up_id(arr){
arr = arr.sort(function (a, b) {
if (+a[0] > +b[0]) {
return 1;
}
if (+a[0] < +b[0]) {
return -1;
}
return 0;
});
return arr;
}
function sort_down(arr, i){
arr = arr.sort(function (a, b) {
if (a[i] > b[i]) {
return -1;
}
if (a[i] < b[i]) {
return 1;
}
return 0;
});
return arr;
}
function sort_up(arr, i){
arr = arr.sort(function (a, b) {
if (a[i] > b[i]) {
return 1;
}
if (a[i] < b[i]) {
return -1;
}
return 0;
});
return arr;
}
function sorted(e){
switch (e.target.id) {
case '0':
if (e.target.classList==1){
arr = sort_down_id(arr);
tableCreate(arr, head, 0, -1);
} else {
arr = sort_up_id(arr);
tableCreate(arr, head, 0, 1);
}
break;
case '1':
if (e.target.classList==1){
arr = sort_down(arr, 1);
tableCreate(arr, head, 1, -1);
} else {
arr = sort_up(arr, 1);
tableCreate(arr, head, 1, 1);
}
break;
case '2':
if (e.target.classList==1){
arr = sort_down(arr, 2);
tableCreate(arr, head, 2, -1);
} else {
arr = sort_up(arr, 2);
tableCreate(arr, head, 2, 1);
}
break;
case '3':
if (e.target.classList==1){
arr = sort_down(arr, 3);
tableCreate(arr, head, 3, -1);
} else {
arr = sort_up(arr, 3);
tableCreate(arr, head, 3, 1);
}
break;
case '4':
if (e.target.classList==1){
arr = sort_down(arr, 4);
tableCreate(arr, head, 4, -1);
} else {
arr = sort_up(arr, 4);
tableCreate(arr, head, 4, 1);
}
break;
}
}
var up= "⇑";
var down= "⇓";
function tableCreate(arr, head, col, classN){
document.querySelector('table').remove();
let body = document.body;
let tbl = document.createElement('table');
tbl.style.border = '1px solid black';
var header = tbl.createTHead();
header.style = 'background: #fc0';
var tr = header.insertRow();
for(let j = 0; j < head.length; j++){
if (col ==j){
let td = tr.insertCell();
td.appendChild(document.createTextNode(head[j]));
td.id = j;
td.className = classN;
if (classN == 1){
td.innerHTML += up;
}
if (classN == -1){
td.innerHTML += down;
}
td.style.border = '1px solid black';
td.onclick = function(e) {
sorted(e);
};
} else{
let td = tr.insertCell();
td.appendChild(document.createTextNode(head[j]));
td.id = j;
td.className = 0;
td.style.border = '1px solid black';
td.onclick = function(e) {
sorted(e);
};
}
}
var tbody = tbl.createTBody()
for(let i = 0; i < arr.length; i++){
let tr = tbody.insertRow();
for(let j = 0; j < arr[0].length; j++){
let td = tr.insertCell();
td.appendChild(document.createTextNode(arr[i][j] ));
td.style.border = '1px solid black';
}
}
body.appendChild(tbl);
}
window.onload = tableCreate(arr, head, 0, 1);
input.oninput = function() {
let table = document.querySelector('table');
let rows = table.querySelectorAll('tr');
for(let i = 0; i < arr.length; i++){
if (arr[i][1].indexOf(input.value)<0) {
rows[i+1].style.display = 'none';
} else{
rows[i+1].removeAttribute("style");
}
}
};
Изначально таблица отсортирована по id:
динамическая страница javascript
Если нажать на «Страна», то все строки таблицы поменяются таким образом, чтобы страны отсортировались в алфавитном порядке.
Если нажать если нажать ещё раз, страны отсортируются в обратном порядке.
Если нажать на «Официальный язык», то все строки таблицы поменяются таким образом, чтобы языки стран отсортировались в алфавитном порядке.
Поле «input» ищет по столбцу «Страна».
Таблица перерисовывается при изменении (вводе с клавиатуры или стирании) любого символа в поле поиска:
Если ввести страну, которая есть в таблице, то выводиться только она:
Если ввести страну, которой нет в таблице, то не выведется ничего:
Размещено на Allbest.ru
Подобные документы
Структура таблицы и типы данных. Ввод данных в ячейки таблицы. Создание запросов на выборку, удаление, обновление и добавление записей, на создание таблицы. Основное различие между отчетами и формами, их назначение. Создание отчетов для базы данных.
курсовая работа [1,9 M], добавлен 17.06.2014Разработка приложения, которое содержит данные об экспонатах и выставках. Создание базы данных и добавление элемента с информацией в любую позицию списков. Добавление и удаление экспонатов с выставки. Сохранение всех списков в файлы, составление отчета.
курсовая работа [1,2 M], добавлен 02.07.2014Использование мастеров Word. Сохранение, закрытие, создание, редактирование документа. Ввод, добавление нового, удаление, выделение, копирование, выравнивание и перемещение текста. Проверка, печать документа. Дополнительные возможности. Создание таблицы.
контрольная работа [137,9 K], добавлен 01.06.2008Этапы создания презентации: знакомство с программой, добавление графиков и диаграмм, рисование и вставка графических и анимационных объектов. Добавление графических клипов из Clip Gallery. Создание и запуск слайд-фильма. Настройка программы Power Point.
контрольная работа [27,2 K], добавлен 07.12.2010Создание простых форм-справочников. Редактирование свойств формы в режиме конструктора. Добавление и редактирование свойств элементов управления. Проектирование отчётов для базы данных. Приведение таблицы к нормальной форме и построение схемы данных.
реферат [138,0 K], добавлен 23.11.2008Создание программы, которая создает набор данных в динамической памяти компьютера и позволяет корректировать его. Описание программного комплекса. Обзор особенностей реализации программы с использованием модулей. Добавление данных в конец текущего набора.
курсовая работа [455,2 K], добавлен 28.08.2017Создание интерактивных веб-страниц. Что такое JavaScript. Полная интеграция с браузером. Мощные средства для создания сетевых соединений. Подключение и выполнение JavaScript. Загрузка данных без перезагрузки страницы. Объекты для работы с мультимедиа.
лекция [16,2 K], добавлен 05.02.2012Microsoft PowerPoint 2007 и его новые возможности. Принципы планирования презентации. Присвоение имени и сохранение презентации. Добавление и удаление слайдов. Добавление и форматирование текста, маркированных списков. Добавление клипа, рисунков SmartArt.
методичка [2,3 M], добавлен 16.03.2011Особенности разработки Web-страницы, с использованием Microsoft Word. Алгоритм работы: сохранение документа Word, как веб-страницы; просмотр веб-страницы, создание гиперссылок. Настройка и проверка Web-страницы с помощью программы Internet Explorer.
контрольная работа [2,4 M], добавлен 03.04.2010Автоматизация работы пользователя в среде MS Office 2000. Современные методы выявления и предотвращения угроз безопасности функционирования программных средств и баз данных. Создание запросов на обновление, добавление, удаление и создание таблицы.
реферат [33,0 K], добавлен 24.03.2011