在CSS和HTML中显示XML

Display XML in CSS and HTML

本文关键字：显示 XML HTML CSS      更新时间：2023-09-26

我的XML结构看起来有点像：

<Bookmark>
    <Type>Media</Type>
    <Name>YouTube</Name>
    <Link>https://www.youtube.com</Link>
</Bookmark>
<Bookmark>
    ...
</Bookmark>
...

我想做的是在html中显示一个表，其中书签Name根据其本身的书签的Type显示在一列中（即用于媒体书签的列、用于工作书签的列等），并且该名称是指向Link提供的地址的链接。

这是我到目前为止所做的（从w3schools修改而来）：

<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
}
else
{// code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","xml/bookmarks.xml",false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML; 
document.write("<table>");
var x = xmlDoc.getElementsByTagName("Bookmark");
for (i = 0; i < x.length; i++)
{ 
    document.write("<tr><td>");
    if (x[i].getElementsByTagName("Type")[0].childNodes[0].nodeValue == "Social")
    {
        document.write(x[i].getElementsByTagName("Name"[0].childNodes[0].nodeValue);
        document.write("</td></tr>");
    } 
}
document.write("</table>");
</script>

这显示了我想要的所有社交书签。我正在努力使结果成为一个链接，并将我的CSS应用于它们。

也许我完全错了，任何建议都会被采纳（注意：我的下一个任务是允许基于web的界面添加和删除书签——这可能使用与下面相同的技术吗？或者我需要进入XQuery或类似的东西吗？）

如果你想要每个书签类型都有一列，我建议你将每个书签集（媒体等）存储在一个数组中，然后通过浏览数组来生成你的表（即，对于每个<tr[i]/>，写<td>media[i]</td>、<td>work[i]</td>等）。当然，要注意数组的大小（不再有书签=空单元格）。

要写一个链接，你可以这样写：

document.write("<a href='"" + x[i].getElementsByTagName("Link")[0].childNodes[0].nodeValue + "'">";
document.write(x[i].getElementsByTagName("Name")[0].childNodes[0].nodeValue);
document.write("</a>");

有几种方法可以将css应用于此表。如果你只想将其应用于这个表，你可以写：

document.write("<table id='"bookmarks'">");

然后在CSS中（例如）：

#bookmarks {/* stuff */}
#bookmarks tr {/* trs stuff */}
#bookmarks td {/* tds stuff */}
/* whaterver */

也许我没有抓住你真正的问题。你能多谈谈你的问题吗？

还有一点：我不明白你为什么要用document.write()。。。您听说过动态编辑HTML内容的HTMLDOM引用吗？

最好使用XSLT。这将把XML转换成HTML。使用CSS设置此HTML的样式。

请参阅http://www.w3schools.com/xsl/xsl_client.asp代码。

相关文章：