Пример за InnerHTML JavaScript
Написано от Сезар Крал
Кодиране aprenderaprogramar.com: CU01139E
УПРАЖНЕНИЕ, РЕШЕНО С INNERHTML JAVASCRIPT
В предишната част от курса видяхме синтаксиса и основното използване на innerHTML в JavaScript. Сега ще предложим и ще дадем решение на упражнение, в което се опитваме да използваме по-напреднали innerHTML. По-конкретно, като се има предвид таблица с данни, ще видим как можем да направим данните редактируеми.
ИЗЯВЛЕНИЕ ЗА УПРАЖНЕНИЕ
С това упражнение искаме, от една страна, да използваме знанията, придобити по време на курса, а от друга страна, да свикнем с идеята, че винаги ще трябва да търсим допълнителна информация, за да решим някои въпроси, които не знаем априори. Когато работите в уеб разработката е невъзможно да знаете целия синтаксис и възможните инструкции, свойства и т.н. и следователно е необходимо да се консултирате с книги, списания или уеб страници, за да получите допълнителна информация до нашето познание.
Изложението на упражнението е както следва:
Уеб страница зарежда таблица с данни относно хранителното съдържание на храните, както е показано по-долу:
| Боровинка | 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 като този: