| |
|
|
| | Вот нашел в сети подходящий мне образец кода. Но надо мне его модифицировать таким образом, чтобы в первой ячейке каждой строки таблицы html-документа выводился не текст, а соответствующий рисунок. Но как это сделать, не могу сообразить. Слишком уж новая для меня эта тема: XML
Файл emperors.xml
<?xml version="1.0" encoding="iso-8859-1"?>
<root>
- <emperors>
- <emperor>
<name>Augustus</name>
<rule>23-67</rule>
<death>Peaceful</death>
</emperor>
- <emperor>
<name>Tiberius</name>
<rule>14-37</rule>
<death>Murdered by his great-nephew and the commander of his bodyguard</death>
</emperor>
- <emperor>
<name>Caligula</name>
<rule>37-41</rule>
<death>Murdered by the commander of his bodyguard (a different one than the one before)</death>
</emperor>
- <emperor>
<name>Claudius</name>
<rule>41-54</rule>
<death>Poisoned by his fourth wife</death>
</emperor>
- <emperor>
<name>Nero</name>
<rule>54-68</rule>
<death>Suicide after losing the Empire</death>
</emperor>
</emperors>
</root>
|
В HTML-документе выводятся данные из XML-документа:
function createTable(){
var x = xmlDoc.getElementsByTagName('emperor');
var newEl = document.createElement('TABLE');// создать табл
newEl.border = 1;
newEl.setAttribute('cellPadding',5); //?
var tmp = document.createElement('TBODY');
newEl.appendChild(tmp);
var row = document.createElement('TR'); //создать верхнюю строку
for (j=0;j<x[0].childNodes.length;j++){
if (x[0].childNodes[j].nodeType != 1) continue;
var container = document.createElement('TH');// создать заголовок табл
var theData = document.createTextNode(x[0].childNodes[j].nodeName);
container.appendChild(theData);
row.appendChild(container);
}
tmp.appendChild(row); //добавить верхнюю строку с заголовком
for (i=0;i<x.length;i++){
var row = document.createElement('TR');
for (j=0;j<x[i].childNodes.length;j++){
if (x[i].childNodes[j].nodeType != 1) continue;
var container = document.createElement('TD');
var theData = document.createTextNode(x[i].childNodes[j].firstChild.nodeValue);
container.appendChild(theData);
row.appendChild(container);
}
tmp.appendChild(row);//добавить строки с содержимым
}
document.getElementById('writeroot').appendChild(newEl);//добавить табл в док-т
|
Если кто-то сможет помочь, заранее благодарю. | |
| |
|
|
| |
|
|
| |
для: coloboc66
(17.08.2006 в 14:34)
| | | Назвать рисунок как <name><img src=... /></name> и выводить. Вообще, там XSLT как-то применяют при выводе. | |
| |
|
|
| |
|
|
| |
для: coloboc66
(17.08.2006 в 14:34)
| | | Вот накатал некий пример.
Насколько понимаю в xml может содержаться
только текст, значит мы можем хранить в нём
только путь к рисунку.
В общем вот что у меня получилось:)
файл test.xml
<?xml version="1.0" encoding="windows-1251"?>
<root>
<aaa>Просто текст</aaa>
<image>Risunok.jpg</image>
<bbb>Тоже текст</bbb>
</root>
|
файл htm
<html>
<head>
<title>IE 6 only</title>
<script>
function LoadXML()
{
//Создание объекта
var xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
//Функция роверки состояния
xmlDoc.onreadystatechange = function()
{
//Если инициализация объекта завершена вызываем parseXML()
if(xmlDoc.readyState=='4')ParseXML(xmlDoc);
}
//Инициализация
xmlDoc.load('test.xml');
}
function ParseXML(xmlDoc)
{
//Получаем корневой элемент (узел)
var myRootNode = xmlDoc.documentElement;
//Создаём таблицу и присваиваем атрибуты
var myTable = document.createElement('TABLE');
myTable.setAttribute('border','1');
myTable.setAttribute('cellSpacing','1');
myTable.setAttribute('cellPadding','1');
myTable.setAttribute('bgColor','#ddaadd');
//Создаём строку в таблице
var myRow = document.createElement('TR');
//Цикл по вложенным элементам (коллекция childNodes)
for(var i=0;i<myRootNode.childNodes.length;i++)
{
//Получаем текстовое значение узла
var myXMLText = myRootNode.childNodes[i].text;
//Создаём столбец
var myCell = document.createElement('TD');
//Если текст находится в теге <image> создаём картинку
if(myRootNode.childNodes[i].tagName == 'image')
{
var myImg = document.createElement('IMG');
myImg.setAttribute('alt','это альт');
//Присваиваем src - строка из xml файла
myImg.setAttribute('src',myXMLText);
//Помещаем картинку в столбец
myCell.appendChild(myImg);
}
else
{
//Создаём текстовый узел для помещения в столбец
var myTextNode = document.createTextNode(myXMLText);
//Помещаем текст в столбец
myCell.appendChild(myTextNode);
}
//Помещаем столбец в строку
myRow.appendChild(myCell);
}
//Вначале строку добавим в tbody - "тело таблицы".
var tmp = document.createElement('TBODY');
tmp.appendChild(myRow);
//Добавляем строку в таблицу
myTable.appendChild(tmp);
//И наконец таблицу помещаем в документ
document.body.appendChild(myTable);
}
</script>
</head>
<body onload="LoadXML()">
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: RMW
(17.08.2006 в 19:40)
| | | Зачем усложнять? В XML могут быть любые атрибуты тегов, поэтому тег IMG полностью подходит под формат, ка и любой другой валидный элемент. | |
| |
|
|
| |
|
|
| |
для: 12345
(17.08.2006 в 20:23)
| | | XML вижу второй раз :)
и вообще ничего не знаю,
представляю себе просто текстовый файл
в котором линейный текст структурирован с помощью тегов и всё.
И зачем это надо не знаю:)
А пример мыслился как простая и по-возможности понятная
демонстрация обхода дерева объектов с использованием двух-трёх
знакомых (с позавчера) методов:) Возможно он кому-нибудь окажется полезным.
А как можно тег xml перевести в html?
Допустим есть такое дело:
<?xml version="1.0" encoding="windows-1251"?>
<root>
<name><img src="myImage.gif" alt="рисунок" width="100" height="100" /></name>
<img src="ris2.gif" />
</root>
|
Прочитать имена и свойства атрибутов можно, но это просто текст
и чё делать дальше.
(Хотя для меня вопрос больше гипотетический, но тема сама по себе интересная.) | |
| |
|
|
