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


Как динамически заполнять таблицу 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?

Новости

Видео рыбалка на карпа и карася
Начал строить дом и задумался, ведь надо ещё качественную проводку, чтоб не менять её через несколько лет. Искал много интернет-магазинов, которые бы предложили мне хорошие услуги, нашел этот рынок. Не

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

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

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