Написано от Сезар Крал

Кодиране aprenderaprogramar.com: CU01139E

УПРАЖНЕНИЕ, РЕШЕНО С INNERHTML JAVASCRIPT

В предишната част от курса видяхме синтаксиса и основното използване на innerHTML в JavaScript. Сега ще предложим и ще дадем решение на упражнение, в което се опитваме да използваме по-напреднали innerHTML. По-конкретно, като се има предвид таблица с данни, ще видим как можем да направим данните редактируеми.

ИЗЯВЛЕНИЕ ЗА УПРАЖНЕНИЕ

С това упражнение искаме, от една страна, да използваме знанията, придобити по време на курса, а от друга страна, да свикнем с идеята, че винаги ще трябва да търсим допълнителна информация, за да решим някои въпроси, които не знаем априори. Когато работите в уеб разработката е невъзможно да знаете целия синтаксис и възможните инструкции, свойства и т.н. и следователно е необходимо да се консултирате с книги, списания или уеб страници, за да получите допълнителна информация до нашето познание.

Изложението на упражнението е както следва:

Уеб страница зарежда таблица с данни относно хранителното съдържание на храните, както е показано по-долу:


Хранително съдържание на 100 g храна. Хранителни калории (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, и натискаме accept, браузърът трябва да ни изпрати url като този:

Внимание: данните, които трябва да бъдат изпратени до URL адреса на местоназначението са данните, редактирани от потребителя, не оригиналните данни на таблицата.

Ако потребителят щракне върху Отказ, оригиналната таблица ще бъде презаредена (така че да няма ред при редактиране).

Ако докато се редактира ред, потребителят щракне върху Редактиране в друг ред, ще се покаже съобщение, което гласи следното: „Може да се редактира само един ред. Презаредете страницата, за да редактирате друга ".

Следващото изображение отразява идеята за това, което искате да постигнете:

innerhtml

В това упражнение предполагаме, че таблицата ще зарежда данни от база данни, но тъй като нашата цел не е да обработваме бази данни или езици от страна на сървъра, а да видим приложенията на JavaScript, ще се ограничим до създаването на таблицата ръчно с необходимия HTML код.

РЪКОВОДСТВА ЗА РЕШЕНИЕ: СТЪПКА 1

Опитайте се да решите упражнението със знанията, придобити по време на курса и отправяйки някои допълнителни запитвания в интернет. Добре е да се опитате сами да се справите с проблемите и да се опитате да ги разрешите сами, тъй като това благоприятства ученето като програмисти. Имайте предвид, че това упражнение може да няма едно решение, но има различни начини за неговото представяне и различни начини за решаването му. Опитайте се да създадете свое собствено решение и след това да го сравните с това, което ще посочим, опитвайки се да видите предимствата и недостатъците на двата начина за решаване на проблема.

РЪКОВОДСТВА ЗА РЕШЕНИЕ: СТЪПКА 2

Ако имате нужда от насоки, тук ще очертаем решението (допълнете тези инструкции, като потърсите в интернет това, което може да ви е необходимо), което сме създали, за да можете да опитате да го приложите сами. Следващите стъпки ще бъдат следните:

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

2) Създайте css файл на име styles.css, където имате стилове за таблицата и за маркерите за обхват с Редактиране на текст, бутони и др.

3) Създайте js файл на име functions.js, където имате глобална променлива с име> и булев тип, който ви позволява да знаете дали някой ред е в редакция или не.

4) Създайте функция>, която трябва да отговаря за трансформирането на данните от даден ред в редактируеми, като ги дефинира в етикети ... с помощта на innerHTML. Трябва също да добавите текста> и двата бутона: Приемам и Отказ. Ако вече е редактиран ред, съобщението>

5) Създайте функция>, така че когато потребителят щракне върху бутона OK, се създава формуляр със скрити данни, заснети от клетките на реда, който се редактира и изпраща до целевия url от метода get. Ще добавите формуляра с innerHTML и изпращането може да се извърши с изявлението на javascript document.formname.submit ();

6) Създайте функцията за заместване, която презарежда оригиналната страница, когато потребителят щракне върху бутона за отмяна. Можете да направите това с оператора JavaScript.location.reload () на JavaScript;

ПРЕДЛОЖЕНО РЕШЕНИЕ

По-долу посочваме кода на предложеното решение. Имайте предвид, че това не трябва да се счита за единственото решение или за най-доброто решение. Може да сте определили по-добро решение от това. Сравнете решението си с предложението и се опитайте да видите предимствата и недостатъците на всяко от тях.

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

Хранително съдържание на 100 g храна.

Протеини (g) Въглехидрати (g) Опции