私のコースでは、ユーザーが連絡先の名を入力できるようにする機能を備えた 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 ファイルをロードし、最初の名前タグを収集し、何らかの方法で 2 つを比較して結果を表示することはわかっています。
私は以下を見てきましたが、これは私が求めているものと似ていますが、結果を表に表示することはできません。 http://www.dzone.com/snippets/simple-javascriptxml ベース
助けてくれてありがとう。