МИНИСТЕРСТВО ЦИФРОВОГО РАЗВИТИЯ,

СВЯЗИ И МАССОВЫХ КОММУНИКАЦИЙ РОССИЙСКОЙ ФЕДЕРАЦИИ

ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ

«САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ ТЕЛЕКОММУНИКАЦИЙ ИМ. ПРОФ. М.А. БОНЧ-БРУЕВИЧА» (СПбГУТ)

Кафедра информационных управляющих систем

Лабораторная работа2

по дисциплине «ТЕХНОЛОГИИ ОБРАБОТКИ ИНФОРМАЦИИ»

Студент гр. ИБ-71вп_____________________________ П. П. Иванов

(подпись)

Проверил ___________________________ А. В. Параничев

(оценка и подпись)

Санкт-Петербург

2023 год

СОЗДАНИЕ И ЗАПОЛНЕНИЕ ТАБЛИЦ С ПОМОЩЬЮ JAVASCRIPT

[выделенное зеленым прочитать и перед отправкой отчета удалить; выделенное желтым поменять на свое; в данном задании нужно автоматизировать заполнение табличных данных из лабораторной работы № 1: с помощью JavaScript вместо HTML]

Для автоматического построения табличных данных добавлен следующий код JavaScript:

Примерный код см. в методе InitializeTable() и связанных с ним методах: Все функции назвать по своему, используя свой номер в формате ИБ_12 или ФИО латиницей: по 1й кнопке инициализировать пустую таблицу, по 2й кнопке - заполнить таблицу, по 3й кнопке - закрасить данные по умолчанию по каждому из параметров обеих таблиц!]

function InitializeTable(){

// 1. Объявляем исходные данные

let arr_table = new Array();

arr_table.push(["Индекс", "Название", "Цена"]);

arr_table.push([1, "Навигатор 1", "10000"]);

arr_table.push([2, "Навигатор 2", "15000"]);

arr_table.push([3, "Навигатор 3", "14000"]);

// 2. Подставляем данные в таблицу по идентификатору "ind"

let dTable = document.getElementById("dvTable");

for(let i = 0; i < this._num_rows; i++){

for(let j = 0; j < this._num_columns; j++){

dTable.childNodes[0].rows[i].cells[j].innerHTML =

arr_table[i][j];

}

}

}

this.flag_color = false

function ChangeColors(){

// Меняем цвета по заданному алгоритму


let color_select = this.flag_color ?

"data_select" : "data_default";

let dTable = document.getElementById("dvTable");

for(let i = 0; i < this._num_rows; i++){

for(let j = 0; j < this._num_columns; j++){

let cell = dTable.childNodes[0].rows[i].cells[j];

if(i == j)

cell.setAttribute("class", color_select);

---

}

}

flag_color = !flag_color;

}

function _PrepareTable(num_rows, num_columns) {

//1. подготавливаем пустую таблицу:

// num_rows строк, num_columns столбцов

let gen_tab = document.createElement("table");

gen_tab.setAttribute("class", "minimalistBlack");

//2. добавляем строку "шапки" таблицы

let row = gen_tab.insertRow(-1);

for (let j = 0; j < num_columns; j++) {

let headerCell = document.createElement("th");

//запоминаем 1-мерный индекс ячейки

//headerCell.setAttribute("ind", j);

headerCell.innerHTML = " "; //arr_table[0][i];

row.appendChild(headerCell);

}

//3. добавляем пустые строки

for (let i = 1; i < num_rows; i++) {

row = gen_tab.insertRow(-1);

for (let j = 0; j < num_columns; j++) {

let cell = row.insertCell(-1);

//запоминаем 1-мерный индекс ячейки

//cell.setAttribute("ind", i*num_columns+j);

cell.innerHTML = " "; // arr_table[i][j];

}

}

//4. добавляем пустую таблицу

let dTable = document.getElementById("dvTable");

dTable.innerHTML = "";

dTable.appendChild(gen_tab);

}
ДЕМОСТРАЦИЯ РАБОТЫ ФУНКЦИЙ JAVASCRIPT

Продемонстрируем построение таблиц пошагово, используя для этого соответствующие функции JavaScript и кнопки в HTML (рис. 1-3) https://jsfiddle.net/b2ouyr5m/:



<input type="button" value="Раскрасить" onclick="ChangeColors()" /> [см. заготовку кода в лабораторно-практической работе 08]

Соответствующий код CSS для отображения таблиц: [также переименовать и присвоить другие настройки отображения, включая цвета]

…



Рис. 1. Демонстрация результата загрузки двух пустых таблиц, созданных с помощью функции _PrepareTable()

Рис. 2. Демонстрация результата заполнения двух таблиц с помощью функции InitializeTable()

Рис. 3. Демонстрация результата закрашивания двух таблиц с помощью функции ChangeColors()

Вывод: о конкретных функциях JavaScript для отображения табличных данных: 5-7 строк.

---

Смотрите также файлы

• Investigation of Crime.docx

• Анализ состояния товарных запасов и мероприятия по их оптимизации.docx

• Вопросы для подготовки к контрольной работе 2.docx

• Лабораторная работа 8. Работа с программой Файлменеджер Проводник Ход работы Ознакомиться с теоретической частью.doc

• В процессе фасилитации происходит изменение .pdf