Автор Сезар Кралл

Кодування aprenderaprogramar.com: CU01139E

ВПРАВА, РОЗВ'ЯЗАНА ІНВЕРТФАРТОВИМ JAVASCRIPT

У попередньому розділі курсу ми бачили синтаксис та основне використання innerHTML в JavaScript. Зараз ми збираємось запропонувати та надати рішення вправі, в якій ми намагаємось більш досконало використовувати innerHTML. Зокрема, отримавши таблицю з даними, ми побачимо, як ми можемо зробити дані доступними для редагування.

ЗАЯВА ПРО ВПРАВУ

За допомогою цієї вправи ми хочемо, з одного боку, використовувати знання, отримані протягом курсу, а з іншого боку, звикати до думки, що нам завжди потрібно буде шукати додаткову інформацію для вирішення деяких питань, яких ми не знаємо апріорі. Працюючи у веб-розробці, неможливо знати весь синтаксис та можливі інструкції, властивості тощо. і тому необхідно проконсультуватися з книгами, журналами чи веб-сторінками, щоб отримати додаткову інформацію, наскільки нам відомо.

Поява вправи така:

Веб-сторінка завантажує таблицю з даними про харчовий вміст продуктів, як показано нижче:


Харчовий вміст на 100 г їжі. Харчові калорії (kCal) Жир (g) Білок (g) Вуглеводи (g) Дії
Чорниця 49 0,2 0,4 12.7 Редагувати
Подорожник 90 0,3 1.0 23.5 Редагувати
Вишня 46 0,4 0,9 10.9 Редагувати
Полуниця 37 0,5 0,8 8.3 Редагувати

При натисканні на Редагувати текст у стовпці Дії бажано наступного:

а) Текст у цьому стовпці, який ставить> синім, буде замінено текстом> сірим або чорним.

б) Дані у відповідному рядку стануть текстові поля, які можна редагувати так що користувач може змінити дані в цьому рядку.

в) Текст повинен з'явитися внизу таблиці: і дві кнопки: "Прийняти" та "Скасувати", на які користувач може натиснути, щоб прийняти зміни або скасувати.

Якщо користувач натискає кнопку Прийняти, дані редагуваного рядка повинні надсилатися на цільову URL-адресу методом get. Наприклад, якщо цільовою URL-адресою є aprenderaprogramar.com, і ми відредагуємо рядок, що відповідає Strawberry, і натиснемо "прийняти", браузер повинен надіслати нам таку адресу:

Увага: дані, які необхідно надіслати на цільову URL-адресу - це дані, відредаговані користувачем, не вихідні дані таблиці.

Якщо користувач натисне кнопку Скасувати, оригінальна таблиця буде перезавантажена (так що в редагуванні не буде рядка).

Якщо користувач натискає кнопку «Редагувати» в іншому рядку під час вибору рядка, з’явиться повідомлення, в якому зазначається таке: «Можна редагувати лише один рядок. Перезавантажте сторінку, щоб відредагувати іншу ".

Наступне зображення відображає ідею того, чого ви хочете досягти:

innerhtml

У цій вправі ми припускаємо, що таблиця збирається завантажувати дані з бази даних, але оскільки наша мета не обробляти бази даних або мови на стороні сервера, а бачити програми JavaScript, ми обмежимося створенням таблиці вручну за допомогою необхідний HTML-код.

КРОКОВІ РЕШЕННЯ: КРОК 1

Спробуйте розв’язати вправу на основі знань, отриманих протягом курсу, та зробивши деякі додаткові запити в Інтернеті. Добре спробувати самостійно зіткнутися з проблемами та спробувати вирішити їх самостійно, оскільки це сприяє навчанню програмістів. Майте на увазі, що ця вправа може не мати єдиного рішення, але існують різні способи її постановки та різні способи вирішення. Спробуйте створити власне рішення, а потім порівняйте його з тим, яке ми вкажемо, намагаючись побачити переваги та недоліки обох способів вирішення проблеми.

КРОКОВІ РЕШЕННЯ: КРОК 2

Якщо вам потрібні вказівки, тут ми наведемо наведене нами рішення (доповніть ці вказівки пошуком в Інтернеті того, що вам може знадобитися), яке ми створили, щоб ви могли спробувати застосувати його самостійно. Крок, який слід виконати, буде наступним:

1) Створіть файл HTML із назвою testEdicionTablas.html, де у вас є HTML-код таблиці, щоб текст редагування знаходився всередині тегів span, які відповідають на подію onclick = "transformEnEditable (this)". Під таблицею додайте порожній div. Порожній div буде служити для додавання того, що повинно відображатися, коли користувач натискає кнопку редагування.

2) Створіть файл CSS з назвою styles.css, де у вас є стилі для таблиці та для тегів span за допомогою редагування тексту, кнопок тощо.

3) Створіть файл js з назвою functions.js, де у вас є глобальна змінна> та логічний тип, який дозволяє дізнатися, чи редагується який-небудь рядок чи ні.

4) Створіть функцію>, яка повинна відповідати за перетворення даних рядка в редаговані, визначаючи їх у мітках ... за допомогою innerHTML. Крім того, ви повинні додати текст> та дві кнопки: Прийняти та Скасувати. Якщо вже редагувався рядок, повідомлення>

5) Створіть функцію>, щоб, коли користувач натискає кнопку ОК, створювалася форма із прихованими даними (прихованими), захопленими з комірок редагуваного рядка та відправлених на цільову URL-адресу методом get. Ви додасте форму з внутрішнім HTML, і подання може бути здійснено за допомогою заяви javascript document.formname.submit ();

6) Створіть функцію заміни, яка перезавантажує оригінальну сторінку, коли користувач натискає кнопку скасування. Це можна зробити за допомогою оператора JavaScript window.location.reload ();

ПРОПОЗИЦІЙНЕ РІШЕННЯ

Нижче ми вказуємо код запропонованого рішення. Майте на увазі, що це не обов’язково вважати єдиним рішенням чи найкращим рішенням. Можливо, ви визначили краще рішення, ніж це. Порівняйте своє рішення з пропозицією та спробуйте побачити переваги та недоліки кожного з них.

Веб-портал - aprenderaprogramar.com

Харчовий вміст на 100 г їжі.

Білок (g) Вуглеводи (g) Варіанти