Создание динамической страницы с использованием 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= "&uArr;";

var down= "&dArr;";

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

  • Создание сайта при помощи HTML и CSS. Язык гипертекстовой разметки HTML и таблица стилей CSS. Основные понятия об этих языках, этапы и алгоритмы программного обеспечения. Добавление стилей в документ. Свойства элементов, принцип построения Web-страницы.

    курсовая работа [2,9 M], добавлен 12.01.2016

  • Методы реализации алгоритмов сортировки и алгоритмов поиска на языках программирования высокого уровня. Программирование алгоритмов сортировки и поиска в рамках создаваемого программного средства на языке Delphi. Создание руководства пользователя.

    курсовая работа [1,7 M], добавлен 16.04.2012

  • Характеристика принципов создания html-страниц и связывания их ссылками так, чтобы можно было произвольным образом переходить от одной страницы к другой. Применение тегов форматирования текста и заголовка окна. Этапы создания html-страницы с таблицей.

    контрольная работа [16,0 K], добавлен 19.06.2014

  • Оформление таблицы на листе Excel. Применение округления чисел до двух знаков после запятой. Выделение диапазона данных, необходимых для построения графика. Добавление диаграммы на листе. Подписи горизонтальной оси. Добавление линий разделения на график.

    контрольная работа [1,6 M], добавлен 13.11.2011

  • Microsoft Word: достоинства и недостатки, алгоритм установки. Требование к аппаратным и программным средствам. Особенности работы с таблицами: создание, редактирование текста, добавление элементов, преобразование, сортировка данных, вычисление формул.

    курсовая работа [2,5 M], добавлен 16.06.2011

  • Организация удобного интерфейса пользователя при работе с данными. Создание форм для ввода, редактирования и поиска информации. Проектирование вычисляемых полей на форме с помощью СУБД Access. Добавление управляющих объектов. Режимы работы с формой.

    контрольная работа [3,2 M], добавлен 29.06.2015

  • Возможности использования Word для создания web-страницы. Использование таблицы и шаблонов оформления документа. Создание гиперссылок и закладок в Word. Обзор визуальных и текстовых редакторов для верстки веб-страниц. Веб-презентация в PowerPoint.

    реферат [312,6 K], добавлен 06.04.2010

  • Создание таблицы, содержащей сведения о книгах (фамилия автора, название, год издательства, тираж, цена) с применением встроенных функций сортировки, поиска данных и их замены, автофильтра, расширенного фильтра, баз данных, диаграмм и графиков в MS Excel.

    курсовая работа [3,3 M], добавлен 16.05.2010

  • Создание высокопрофессиональных видеоматериалов с помощью Microsoft PowerPoint. Запуск программы, открытие файла с презентацией. Режимы работы, сохранение презентации. Выделение, снятие выделения объектов, панель их свойств. Добавление и изменения текста.

    лабораторная работа [615,5 K], добавлен 17.03.2012

  • Преимущества системы управления предприятием GELICON ERP. Особенности проектно-ориентированного программирования. Добавление новой функции пользователя в системе капитал CSE. Разработка диалогового окна "Добавление новой страны в справочник стран".

    курсовая работа [1,1 M], добавлен 29.04.2014

Работы в архивах красиво оформлены согласно требованиям ВУЗов и содержат рисунки, диаграммы, формулы и т.д.
PPT, PPTX и PDF-файлы представлены только в архивах.
Рекомендуем скачать работу.