在 CSS 和 HTML 中显示 XML

Question

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

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

我想做的是在html中显示一个table，其中书签Name按照书签的Type显示在一列中是（即媒体书签栏，工作书签栏等）并且该名称是 link 到 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>

这显示了我想要的所有社交书签。我正在努力的部分是使结果成为 link 并将我的 CSS 应用于它们。

也许我完全以错误的方式解决这个问题，我们将不胜感激任何建议（注意：我的下一步工作是允许基于 Web 的界面添加和删除书签 - 这是否可能使用与下面还是我需要进入 XQuery 或类似的东西？）

Answer 1

最好的办法是使用 XSLT。这会将 XML 转换为 HTML。使用 CSS 设置 HTML.

的样式

代码见http://www.w3schools.com/xsl/xsl_client.asp。

Answer 2

如果您希望每个书签类型都有一列，我建议您将每个书签集（媒体等）存储在一个数组中，然后通过浏览您的数组生成您的 table（即每个 <tr[i]/> 写入 <td>media[i]</td> 、 <td>work[i]</td> 等）。当然要注意数组的大小（没有更多书签 = 空单元格）。

要写一个link，可以这样写：

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 应用于此 table。如果你只想将它应用到 this table，你可以这样写：

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

然后在你的CSS（例如）：

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

可能我没听清你真正的问题。你能详细谈谈你的问题吗？

另一点：我不明白你为什么要使用 document.write()...你听说过 HTML DOM 引用动态编辑 HTML 内容吗？

在 CSS 和 HTML 中显示 XML

Display XML in CSS and HTML

html

javascript

css

xml

xquery