Городской портал города Оленегорск


Как динамически заполнять таблицу HTML данными XML

Как только вы узнаете, как получить данные XML с сервера, следующим шагом будет изучение того, как отображать эти данные в браузере. Одним из способов использования данных XML является заполнение ими таблицы HTML. Выполните следующие 12 шагов, чтобы узнать, как это делается.

  1. Начните с исходного HTML-документа, который имеет в теле страницы следующее: <table id = "MainTable"> <tbody id = "BodyRows"> </ tbody> </ table>
  2. Документ XML, который мы загрузим в этот HTML, имеет следующую структуру. Обратите внимание, что узлы для сотрудников с 3 по 6 свернуты на следующем рисунке.
    Как только вы узнаете, как получить данные XML с сервера, следующим шагом будет изучение того, как отображать эти данные в браузере
  3. После загрузки страницы используйте JavaScript для запуска функции buildTable (), которая, в свою очередь, запустит функцию для заполнения строк таблицы. window.addEventListener ("load", function () {getRows ();});
  4. Напишите функцию getRows () для получения данных XML с использованием AJAX. Если запрос выполнен успешно, запустите функцию с именем showResult (). function getRows () {var xmlhttp = new XMLHttpRequest (); xmlhttp.open ("get", "Employees", true); xmlhttp.onreadystatechange = function () {if (this.readyState == 4 && this.status == 200) {showResult (this); }}; xmlhttp.send (нуль); }
  5. Напишите showResult (), который примет ответ AJAX в качестве параметра. function showResult (xmlhttp) {}
  6. Внутри функции showResult () извлеките XML-документ из параметра объекта ответа. function showResult (xmlhttp) { var xmlDoc = xmlhttp.responseXML.documentElement; }
  7. Напишите новую функцию с именем removeWhiteSpace (), которая удалит все невидимые символы из XML и упростит для нас анализ. function removeWhitespace (xml) {var loopIndex; for (loopIndex = 0; loopIndex
  8. Вызовите removeWhiteSpace (), передав в XML-документ. function showResult (xmlhttp) {var xmlDoc = xmlhttp.responseXML.documentElement; removeWhitespace (xmlDoc); }
  9. Выберите данные в документе XML с помощью getElementsByTagName. function showResult (xmlhttp) {var xmlDoc = xmlhttp.responseXML.documentElement; removeWhitespace (xmlDoc); var rowData = xmlDoc.getElementsByTagName ("Сотрудники"); }
  10. Вызовите новую функцию с именем addTableRowsFromXmlDoc (), которая будет принимать данные XML и элемент, в котором результаты должны выводиться в качестве параметров. function showResult (xmlhttp) {var xmlDoc = xmlhttp.responseXML.documentElement; removeWhitespace (xmlDoc); var outputResult = document.getElementById ("BodyRows"); var rowData = xmlDoc.getElementsByTagName (rowElement); addTableRowsFromXmlDoc (ROWDATA, outputResult); }
  11. Напишите функцию addTableRowsFromXmlDoc () следующим образом. function addTableRowsFromXmlDoc (xmlNodes, tableNode) {var theTable = tableNode.parentNode; var newRow, newCell, i; console.log ("Количество узлов:" + xmlNodes.length); for (i = 0; i <xmlNodes.length; i ++) {newRow = tableNode.insertRow (i); newRow.className = (i% 2)? "OddRow": "EvenRow"; for (j = 0; j <xmlNodes [i] .childNodes.length; j ++) {newCell = newRow.insertCell (newRow.cells.length); if (xmlNodes [i] .childNodes [j] .firstChild) {newCell.innerHTML = xmlNodes [i] .childNodes [j] .firstChild.nodeValue; } else {newCell.innerHTML = "-"; } console.log ("cell:" + newCell); }} theTable.appendChild (tableNode); } Эта функция проходит по переданному XML-списку узлов, добавляя новую строку таблицы для каждого узла в списке. Затем он устанавливает имя класса строки. Внутренний цикл перебирает все дочерние узлы (например, Salesperson, Title и т. Д.) Текущего узла (например, текущего Employee), создавая ячейку данных таблицы для каждого.
  12. Запустите скрипт, открыв его в веб-браузере. Вы можете проверить его локально, без сервера, создав файл Employees.xml и изменив URL-адрес в методе openH) XMLHttpRequest на Employees.xml. Готовая HTML-страница и скрипт должны выглядеть следующим образом: <! DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <title> ответ дескриптора теста </ title> <script> window.addEventListener ("load", function () {getRows ();}); function getRows () {var xmlhttp = new XMLHttpRequest (); xmlhttp.open ("get", "Employees.xml", true); xmlhttp.onreadystatechange = function () {if (this.readyState == 4 && this.status == 200) {showResult (this); }}; xmlhttp.send (нуль); } function showResult (xmlhttp) {var xmlDoc = xmlhttp.responseXML.documentElement; removeWhitespace (xmlDoc); var outputResult = document.getElementById ("BodyRows"); var rowData = xmlDoc.getElementsByTagName ("Сотрудник"); addTableRowsFromXmlDoc (ROWDATA, outputResult); } function addTableRowsFromXmlDoc (xmlNodes, tableNode) {var theTable = tableNode.parentNode; var newRow, newCell, i; console.log ("Количество узлов:" + xmlNodes.length); for (i = 0; i <xmlNodes.length; i ++) {newRow = tableNode.insertRow (i); newRow.className = (i% 2)? "OddRow": "EvenRow"; for (j = 0; j <xmlNodes [i] .childNodes.length; j ++) {newCell = newRow.insertCell (newRow.cells.length); if (xmlNodes [i] .childNodes [j] .firstChild) {newCell.innerHTML = xmlNodes [i] .childNodes [j] .firstChild.nodeValue; } else {newCell.innerHTML = "-"; } console.log ("cell:" + newCell); }} theTable.appendChild (tableNode); } function removeWhitespace (xml) {var loopIndex; for (loopIndex = 0; loopIndex <xml.childNodes.length; loopIndex ++) {var currentNode = xml.childNodes [loopIndex]; if (currentNode.nodeType == 1) {removeWhitespace (currentNode); } if (! (/ \ S / .test (currentNode.nodeValue)) && (currentNode.nodeType == 3)) {xml.removeChild (xml.childNodes [loopIndex--]); }}} </ script> <style> table {} td {padding: 2px; граница: 1px solid #dadada; } .EvenRow {background-color: yellow; } </ style> </ head> <body> <table id = "MainTable"> <tbody id = "BodyRows"> </ tbody> </ table> </ body> </ html> При запуске скрипт будет создать следующий вывод в браузере:

Автор: Крис Минник

Крис является плодовитым автором и тренером, а также генеральным директором WatzThis ?. Его опубликованные книги включают «Написание компьютерного кода», «JavaScript для детей», «Кодирование с помощью JavaScript для чайников», «Начало HTML5 и CSS3 для чайников», «Веб-набор для чайников», «Библия по сертификации электронной коммерции CIW» и XHTML «New Riders».

О Webucator

Webucator проводит обучение под руководством инструктора для студентов по всей территории США и Канады. Мы обучили более 90 000 студентов из более чем 16 000 организаций таким технологиям, как Microsoft ASP.NET, Microsoft Office, Azure, Windows, Java, Adobe, Python, SQL, JavaScript, Angular и многим другим. Проверьте наш полный каталог курсов ,

Похожие

Как скачать видео с YouTube
Хотя существует довольно много программных инструментов и приложений, которые позволяют загружать видео с YouTube для просмотра в автономном режиме, они вам больше не нужны, если вы хотите загружать свои собственные видео с веб-сайта YouTube. Самый простой способ загрузить отдельное видео с YouTube - через Диспетчер видео. Когда вы вошли в YouTube, щелкните свой адрес электронной почты в правом верхнем углу и выберите «Менеджер видео» в меню. Теперь нажмите кнопку «Изменить» рядом с любым
Как или почему работает транс-музыка?
Если вы никогда не слышали о транс-музыке в 21-м веке, скорее всего, вы жили под скалой или, возможно, вы мертвы. Как тысячелетие, я могу легко подтвердить, что транс музыка оказала значительное влияние в настоящее время. Теперь я был любителем классических песен. Я предпочел бы слушать Queen весь день, потягивая чай и притворяясь британцем, а не ходить в клубы, указывать пальцем в потолок и прыгать на электронную музыку. Но я не могу отрицать тот факт, что транс-музыка, однако, очень
Breitbart, InfoWars запрещены как источники в Википедии
Редакторы Википедии проголосовали за запрет Брейтбарта как надёжного источника записей на своем сайте. Сайт также запретил авторам использовать InfoWars в качестве источника в статьях, сообщает Motherboard. Всего сайт оценивает более 2500 ссылок на Breitbartexist среди своих статей. Говоря о Breitbart, один из редакторов сайта заявил: «Мне не нравится использование общих
Как управлять мышью с помощью планшета от Xbox 360
Вы часто используете компьютер, например, для просмотра фильмов? Вы подключаете его к телевизору и хотите удобно управлять им с дивана? Узнайте, как легко управлять мышью и клавиатурой с помощью контроллера Xbox 360. Многие
Как проверить / изменить пользовательский ввод с помощью скрипта
Нажмите кнопку Изменить , чтобы открыть редактор скриптов. Чтобы получить информацию о пользователе, вы можете использовать ссылки на значения (например,% username%). Значения ссылок будут заменены соответствующими значениями свойств учетной записи пользователя. $ htable = @ {FirstName = "% firstname%"; LastName = "% lastname%"; Department
Как удалить QVO6 из браузеров Chrome, Firefox и Internet Explorer
QVO6 - это один из мусоров, который можно загрузить на наш компьютер, когда мы загружаем игры или программы из Интернета. Изменяет стартовую страницу в браузере и может вызвать некоторую путаницу. Тем не менее, есть простой способ стереть его. Чтобы удалить QVO6, мы должны сделать 2 шага в каждом браузере. Мы должны изменить настройки стартовой страницы, а также изменить ярлыки для каждого браузера, чтобы они не приводили к QVO6. Давайте
Интернет от ОГО. Или как организовать интернет соседям.
Еще когда как я учился то делал дипломную работу на тему "провайдерство и с чем его едят))". Провайдер - это человек или компания, которая дает нескольким и более людям интернет. В те далекие времена я успел попользоваться и ознакомиться наверное со всеми послугмы провайдеров в городе и с технологиями с помощью которых тот интернет предоставлялся. Особенно трепетно ​​упоминается интернет на технологии dial-up))). Чтобы скачать одну песню на три мегабайта
bingmaps
Как настроить новый браузер Firefox 57 Quantum в соответствии с вашими предпочтениями
... htmlview?sle=true#gid=0> Таблица Google Docs в нем перечислены основные расширения и указано, переносятся они или нет. Пользователи Firefox могут видеть, какие расширения были отключены, нажав Ctrl-Shift-A, чтобы отобразить страницу дополнений, затем выбрав Legacy Extensions. Вы можете снова включить их, перейдя в about: config , выполнив поиск extensions.legacy.enabled и изменив двоичное значение на true. Однако это также отключает многопроцессорную
HTML
PhpStorm обеспечивает мощную поддержку HTML, которая включает подсветку синтаксиса и ошибок, форматирование в соответствии со стилем кода, проверку структуры, завершение кода, предварительный просмотр на лету во время сеанса отладки ( Live Edit ), и многое другое. Спецификация HTML настраивается с помощью предпочтения Уровень языка HTML по умолчанию на странице настроек PhpStorm (Ctrl + Alt + S). По умолчанию предполагается
Как исправить проблему с подключением Wi-Fi LG G3
Как исправить проблему с подключением Wi-Fi LG G3 ОБНОВЛЕНО: прочитайте оригинальное руководство здесь: LG G не будет подключаться к Wi-Fi LG - один из лучших производителей Android-смартфонов, а LG G3 - один из лучших продуктов, выпущенных этой компанией. Но мы не знаем ни одного смартфона, который бы работал без ошибок, а также для LG G3. Многие пользователи испытывают проблемы с подключением LG G3 Wi-Fi.
ClassName = (i% 2)?
ClassName = (i% 2)?
Вы подключаете его к телевизору и хотите удобно управлять им с дивана?
Htmlview?

Новости

Рыбалка в Териберке
На марте туда пожалуй под закрытие дороги, становилось снять номер в мотельчике на Очередном шоссе. Галопом вылетели из строя, успели как раз к слову движения колонны. С уловкой в общем било, один-единственный

Футболка рыбалка
Главная   /  Мой блог ← Футболки логотипом armin van buuren   |  В начало  |  Футболка the pirate bay → Качественные футболка рыбалка |

Клевое место рыбалка
Мы предлагаем рыбалку и отдых в уникальном месте Москвы, национальном парке "Лосиный остров"! Нижний пруд Очищенная береговая территория идеально подходит для ловли на удочку, штекер и удобного

Светлые горы рыбалка
«Светлые горы» в Подмосковье - одно из мест, где москвичи, да и гости, могут провести время в свое удовольствие и одновременно с пользой. База расположена неподалеку от столицы. Не нужно далеко

Рыбалка на пахре
По моим наблюдениям, как двадцать лет назад, так и сейчас Пахра вполне способна одарить рыболова хорошим уловом плотвы и подлещика, а если особо повезет, то и знаменитым пахринским карасем, который тянет

Рыбалка в савельево
Ленинградское шоссе проходит по живописным местам. К ним относятся водные просторы в Карелии, живописные заводи в Завидово. Однако поехать туда, чтобы порыбачить, может не каждый. Это связано со значительной

Рыбалка на селигере
На озере Селигер рыбачить будет интересно всем, кто не любит халявы. То есть любящих платные пруды просим пройти мимо. Так как здесь ловля рыбы зависит от времени года, погоды, времени суток, умения ловить

Рыбалка в карелии
Республики Карелия находится в северо-западной части страны, климат довольно мягкий, с большим количеством осадков. Характерно, что зима вступает в свои права рано, она, как правило, снежная, но без сильных

Русская рыбалка 3
Игра русская рыбалка 3 - это последняя официальная версия игры, в которой есть одиночный режим. За эту игру не надо платить никаких денег – она абсолютно бесплатна, просто скачиваете ее себе на компьютер

Триал русская рыбалка
триал русская рыбалка Уважаемые рыбаки и гости, фото отчёт за 31.08.2017 года, было произведено зарыбление водоема карпом, общим весом 700 кг, навеска 0.7-1 кг. Всем успехов.

                                                                                                                                               ОЛЕНЕГОРСК 2010 - 2014                                                                                                 

создание сайта - Старт Икс