个人中心
gpt4 book ai didi

javascript - 使用 JavaScript 搜索 XML 并在表中显示结果

转载 作者：太空狗 更新时间：2023-10-29 15:17:21 26 4
gpt4 key购买 nike

在我的类(class)中，我被要求创建一个 html 页面，该页面具有允许用户输入联系人名字的功能，提交时加载我之前创建的 xml 文件，循环遍历联系人直到它与用户输入的名字相匹配，并在同一页面的带有标题和 <h1> 的表格中显示联系信息(电子邮件地址除外)显示联系方式是:。如果没有匹配，应该有一个 <h2>上面写着联系人不存在。

以下是我的 XML 文件:

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="Contact.xsl" ?>
<!DOCTYPE contact SYSTEM "contact.dtd">
<contact>
    <person>
        <name>
            <firstname>Bob</firstname>
            <lastname>Jones</lastname>
        </name>
        <phone>(02)44 42 45 63</phone>
        <address>
            <street>34 Highway Road</street>
            <city>Grovedale</city>
            <state>NSW</state>
            <postcode>3228</postcode>
            <email>bob.jones@email.com</email>
        </address>
    </person>
    <person>
        <name>
            <firstname>Gary</firstname>
            <lastname>Williams</lastname>
        </name>
        <phone>(02)44 41 87 56</phone>
        <address>
            <street>223 Yarra Avenue</street>
            <city>Branston</city>
            <state>NSW</state>
            <postcode>2317</postcode>
            <email>gary.williams@email.com</email>
        </address>
    </person>

我已经尝试了一些方法，但我不知道如何让数据显示在表格中。以下是我的 XSL 文件，这是我假设他们希望显示表格的方式，但包含搜索结果。

<?xml version="1.0" encoding="ISO-8859-1"?><!-- DWXMLSource="Contact.xml" -->
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<head>
<style>
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}
div {
    margin-left: 150px;
    margin-right: 20px;
    margin-top: 50px;
    width: 80%;
}
h1 {
    font-size: 24px;
    color: #F00;
}
.headings {
    background-color: #06F;
}
.data {
    background-color: #6F9;
}
.table {
    border: 2px solid #F00;
    width: 100%;
}
</style>
</head>
<body>
<div>
<h1>CONTACTS</h1>
    <table class="table">
        <tr class="headings">
            <th>First Name</th>
            <th>Last Name</th>
            <th>Street</th>
            <th>City</th>
            <th>State</th>
            <th>Postcode</th>
            <th>Email</th>
        </tr>
        <xsl:for-each select="contact/person">
        <tr class="data">
            <td><xsl:value-of select="name/firstname"/></td>
            <td><xsl:value-of select="name/lastname"/></td>
            <td><xsl:value-of select="address/street"/></td>
            <td><xsl:value-of select="address/city"/></td>
            <td><xsl:value-of select="address/state"/></td>
            <td><xsl:value-of select="address/postcode"/></td>
            <td><xsl:value-of select="address/email"/></td>
        </tr>
    </xsl:for-each>
</table>
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

我必须使用 JavaScript 来搜索 XML 文件并创建一个表格来显示搜索结果。

我的HTML如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Task 2</title>
<script language="JavaScript" type="text/javascript">
window.onload = loadIndex;
function loadIndex()
{
    if (document.implementation && document.implementation.createDocument)
    {
        xmlDoc = document.implementation.createDocument("", "", null);
        xmlDoc.load("Contact.xml");
    }
    else if (window.ActiveXObject)
    {
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async = "false";
        xmlDoc.load("Contact.xml");
    }
}
function searchIndex()
{
    if (!xmlDoc)
    {
        loadIndex();
    }
    var searchterm = document.getElementById("searchme").value;
    var allitems = xmlDoc.getElementsByTagName("firstname");
    results = new Array;
    for (var i=0;i<allitems.length;i++)
    {
        var name = allitems[i].lastChild.nodeValue;
        var exp = new RegExp(searchterm,"i");
        if ( name.match(exp) != null)
        {
            results.push(allitems[i]);
        }
    }
    showResults(results, searchterm);
}
function showResults(results, searchterm)
{
    //insert table data here to be displayed
}
</script>
</head>
<body>
First Name: <input type="text" name="firstname" id="searchme">
<br />
<input type="submit" value="Search" onClick="searchIndex(); return false;">
</body>
</html>

如您所见，我不知道从哪里开始。我知道我会加载 XML 文件，然后收集名字标签，然后以某种方式比较两者，然后显示结果。

我看到了以下内容，这与我所追求的类似，但我无法将结果显示在表格中。 http://www.dzone.com/snippets/simple-javascriptxml-based

感谢您的帮助。

最佳答案

以下是我用来解决我遇到的问题的方法。我遇到的一个问题是在本地进行测试。不起作用。如果未找到联系人，这也是待处理的消息。当我找到解决方案时，我会更新。

更新:已找到解决方案。请参阅下面更新的代码:

<script language="JavaScript" type="text/javascript">
function loadXMLDoc(dname)
{
    if (window.XMLHttpRequest)
    {
        xhttp=new XMLHttpRequest();
    }
    else
    {
        xhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhttp.open("GET",dname,false);
    xhttp.send();
    return xhttp.responseXML;
} 
function searchXML()
{
    xmlDoc=loadXMLDoc("Contact.xml");
    x=xmlDoc.getElementsByTagName("firstname");
    input = document.getElementById("input").value;
    size = input.length;
    if (input == null || input == "")
    {
        document.getElementById("results").innerHTML= "Please enter a character or name!";
        return false;
    }
    for (i=0;i<x.length;i++)
    {
        startString = firstname.substring(0,size);
        if (startString.toLowerCase() == input.toLowerCase())
        {
            firstname=xmlDoc.getElementsByTagName("firstname")[i].childNodes[0].nodeValue;
            lastname=xmlDoc.getElementsByTagName("lastname")[i].childNodes[0].nodeValue;
            phone=xmlDoc.getElementsByTagName("phone")[i].childNodes[0].nodeValue;
            street=xmlDoc.getElementsByTagName("street")[i].childNodes[0].nodeValue;
            city=xmlDoc.getElementsByTagName("city")[i].childNodes[0].nodeValue;
            state=xmlDoc.getElementsByTagName("state")[i].childNodes[0].nodeValue;
            postcode=xmlDoc.getElementsByTagName("postcode")[i].childNodes[0].nodeValue;
            divText = "<h1>The contact details are:</h1><br /><table border=1><tr><th>First Name</th><th>Last Name</th><th>Phone</th><th>Street</th><th>City</th><th>State</th><th>Postcode</th></tr>" + "<tr><td>" + firstname + "</td><td>" + lastname + "</td><td>" + phone + "</td><td>" + street + "</td><td>" + city + "</td><td>" + state + "</td><td>" + postcode + "</td></tr>" + "</table>";
            break;
        }
        else
        {
            divText = "<h2>The contact does not exist.</h2>";
        }
    }
    document.getElementById("results").innerHTML= divText;
}
</script>

我的 html 主体:

<body>
First Name: <input type="text" name="firstname" id="input">
<br />
<input type="submit" value="Submit" onClick="searchXML()">
<br />
<br />
<div id="results">
</div>
</body>

我希望这可以帮助其他人。

关于javascript - 使用 JavaScript 搜索 XML 并在表中显示结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17016359/

26 4 0
文章推荐： javascript - 视差滚动如何工作？
文章推荐： android - 在 Eclipse 的属性框中设置 (dp) 值
文章推荐： android - 以用户定义的频率同步选定的帐户
文章推荐： javascript:void(0) 和目标 ="_blank"行为
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com