Html 使用 JavaScript 搜索 XML 并在表格中显示结果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17016359/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Search XML with JavaScript and Display Results in Table
提问by Curley5959
For my course, I have been asked to create a html page that has the functionality of allowing a user to enter the first name of a contact, which onsubmit, loads an xml file I previously created, loops through the contacts until it matches the first name entered by the user, and displays the contact information, except the email address, on the same page, in a table with headings and a <h1>displaying The contact details are:. If there is no match, there should be a <h2>that says The contact does not exist.
在我的课程中，我被要求创建一个 html 页面，该页面具有允许用户输入联系人名字的功能，该页面在提交时加载我之前创建的 xml 文件，循环访问联系人直到与第一个匹配用户输入的姓名，并在同一页面上显示除电子邮件地址外的联系信息，在带有标题和<h1>显示的表格中。联系方式为：。如果没有匹配，应该有一个<h2>说联系人不存在。
The following is my XML file:
以下是我的 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>[email protected]</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>[email protected]</email>
</address>
</person>
I have tried a few things, but I have no idea how I would get the data to display in a table. The following is my XSL file which is how I assume they want the table to be shown, but with the results of the search.
我尝试了一些方法，但我不知道如何将数据显示在表格中。以下是我的 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>
I have to use JavaScript to search the XML file and create a table displaying the results from the search.
我必须使用 JavaScript 来搜索 XML 文件并创建一个表格来显示搜索结果。
The HTML I have is as follows:
我拥有的 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>
As you can see, I have no idea where to start. I know I would load the XML file, then gather the first name tag, then somehow compare the two then display the results.
如您所见，我不知道从哪里开始。我知道我会加载 XML 文件，然后收集第一个名称标签，然后以某种方式比较两者，然后显示结果。
I have seen the following, and this is similar to what I am after, but I cant get the results to display in a table. http://www.dzone.com/snippets/simple-javascriptxml-based
我已经看到了以下内容，这与我所追求的类似，但是我无法将结果显示在表格中。 http://www.dzone.com/snippets/simple-javascriptxml-based
Thanks for the help.
谢谢您的帮助。
采纳答案by Curley5959
The following is what I used to fix the issues I was having. One problem I was having is testing this locally. It will not work. This also is pending a message if no contact is found. I will update when I find the solution.
以下是我用来解决我遇到的问题的方法。我遇到的一个问题是在本地测试。不起作用。如果未找到联系人，这也正在等待消息。当我找到解决方案时，我会更新。
UPDATE: Solution found. See updated code below:
更新：找到解决方案。请参阅下面的更新代码：
<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>
My html body:
我的 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>
I hope this can help someone else out.
我希望这可以帮助别人。
回答by Falguni P
startString = firstname.substring(0,size);
Here, firstnameis no where define before for loop, that's why giving below error.
在这里， firstname在 for 循环之前没有定义，这就是给出以下错误的原因。
Uncaught TypeError: Cannot read property 'substring' of undefined.
未捕获的类型错误：无法读取未定义的属性“子字符串”。
回答by Tyler Jones
I referenced first name as a variable like this before the startString.
我在 startString 之前将名字作为这样的变量引用。
firstname = xmlDoc.getElementsByTagName("firstname")[i].childNodes[0].nodeValue;
startString = firstname.substring(0,size);
It worked great after that. Hope that helps!
之后效果很好。希望有帮助！
